I use Vue Router to navigate inside Vue.js SPA application. So I define routes as following:

createRouter({
    routes: [
      {
        path: '/budget/:budgetId(\\d+)?',
        name: 'budget',
        component: BudgetView,
      },
    ],
  }),

And when I navigate to 'budget' page, url changes to the following /budget/1.

But when I reload the page in static web server, I get an error Not Found. This is because resource does not exist.

So I want actually Vue Router to navigate to the following url /?path=/budget/1 in order to web server can proceed this page navigation correctly.

Something like option pathInQuery: true on Router creation.

I use Vue Router to navigate inside Vue.js SPA application. So I define routes as following:

createRouter({
    routes: [
      {
        path: '/budget/:budgetId(\\d+)?',
        name: 'budget',
        component: BudgetView,
      },
    ],
  }),

And when I navigate to 'budget' page, url changes to the following /budget/1.

But when I reload the page in static web server, I get an error Not Found. This is because resource does not exist.

So I want actually Vue Router to navigate to the following url /?path=/budget/1 in order to web server can proceed this page navigation correctly.

Something like option pathInQuery: true on Router creation.

• vue.js
• single-page-application

• 1 Why not simply use Hash mode? It is a well-trodden path, and not much different from what you describe. – Moritz Ringler Commented Feb 11 at 12:11

1 Answer 1

as Moritz Ringler wrote Hash mode can be used.