Contribute

Edit this documentation

Translate the documentation or open the complete project on your computer.

Nothing is published until you choose to submit your work.

Frontend Routing

Using frontend routing in your Wails application

Frontend routing is a popular way to switch views in a single-page application. This guide covers recommended approaches for different frontend frameworks when using Wails.

The recommended approach for routing in Vue is Hash Mode:

javascript
import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
});

Hash mode uses the URL hash to render different views, avoiding issues with the Wails runtime interfering with routing by using the hash-based URL format.

Why Hash Routing?

Wails embeds your frontend into a native webview window. Using hash-based routing (#/page instead of /page) avoids conflicts with:

  • The Wails runtime’s internal routing
  • Native window URL handling on different platforms
  • Production assets served from non-root paths

Troubleshooting

If you’re having issues with frontend routing in production builds:

  • Make sure your frontend build tool is configured to output for hash mode routing
  • For Vite-based projects, add base: "./" to your vite.config.js
  • Verify your index.html handles the fallback properly for SPA routing
Edit page

Last updated: