vue.js历史与子路径上的哈希模式

如果你没有把你的vue Router安装在根页面上,而是安装在一个 "子路径 "上,那么Vue Router在历史和哈希模式下的行为有一个重要区别。

历史模式

例如,如果你想使用 https://picockpit.local/debug/ 让Vue Router继续存在,在 历史模式:

以下路线

{ path: '/', component:DebugOne}。

{ path: '/two', component:DebugTwo}。

{ path: '*', component:FourOhFour}

不起作用 正如预期的那样!(你的404页面使用了catch all将被显示)。

你将不得不修改它们以 包括子路径 (debug):

{ path: '/debug/', component:DebugOne}。

{ path: '/debug/two', component:DebugTwo}。

{ path: '*', component:FourOhFour}

在这种情况下,你将能够访问以下网址。

哈希模式

在哈希模式下,情况正好相反。你将需要使用如下的路线。

{ path: '/', component:DebugOne}。

{ path: '/two', component:DebugTwo}。

{ path: '*', component:FourOhFour}

在这种情况下,你将能够访问以下网址。