In case you are mounting your vue Router not on the root page, but a “subpath”, there is an important difference in the behavior of Vue Router in history and hash mode.

History mode

If you want, for example, to use https://picockpit.local/debug/ to have the Vue Router live on, in history mode:

The following routes

{ path: ‚/‘, component: DebugOne},

{ path: ‚/two‘, component: DebugTwo},

{ path: ‚*‘, component: FourOhFour}

will not work as expected! (Your 404 page using the catch all will be displayed).

You will have to modify them to include the subpath (debug):

{ path: ‚/debug/‘, component: DebugOne},

{ path: ‚/debug/two‘, component: DebugTwo},

{ path: ‚*‘, component: FourOhFour}

In this case you will be able to access the following URLs:

Hash mode

In hash mode it is just the opposite. You will need to use the routes as follows:

{ path: ‚/‘, component: DebugOne},

{ path: ‚/two‘, component: DebugTwo},

{ path: ‚*‘, component: FourOhFour}

In this case you will be able to access the following URLs: