vue.js history vs hash mode en una sub-ruta

En caso de que esté montando su vue Router no en la página raíz, sino en una "sub-ruta", hay una diferencia importante en el comportamiento de Vue Router en modo historia y hash.

Modo historia

Si quiere, por ejemplo, utilizar https://picockpit.local/debug/ para que el router Vue siga vivo, en modo historia:

Las siguientes rutas

{ ruta: '/', componente: DebugOne},

{ ruta: '/two', componente: DebugTwo},

{ ruta: '*', componente: FourOhFour}

no funcionará ¡como se esperaba! (Se mostrará su página 404 utilizando el catch all).

Tendrá que modificarlos para incluir la sub-ruta (depuración):

{ ruta: '/debug/', componente: DebugOne},

{ ruta: '/debug/two', componente: DebugTwo},

{ ruta: '*', componente: FourOhFour}

En este caso podrá acceder a las siguientes URLs:

• https://picockpit.local/debug/
• https://picockpit.local/debug/two

Modo Hash

En el modo hash es justo lo contrario. Tendrá que utilizar las rutas de la siguiente manera:

{ ruta: '/', componente: DebugOne},

{ ruta: '/two', componente: DebugTwo},

{ ruta: '*', componente: FourOhFour}

En este caso podrá acceder a las siguientes URLs:

• https://picockpit.local/debug/#/
• https://picockpit.local/debug/#/two