vue.js history vs hash mode on a subpath

By Maximilian Batz | 2020-02-24

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:

Posted in Vue.js and tagged , , , , ,