Vue 路由器路径匹配行为

Question

查看此代码沙盒中的代码：

观察结果：

当您单击应用程序中的 go to users 链接时，路线的匹配路径将更改为

/home/users

但是，当你重新加载这个页面时，路由的匹配路径就变成了

/home/:matchRest(.*)*

我的假设是否正确，即路由器始终匹配从 TOP 到 BOTTOM 的路径，并在第一个找到的匹配处停止？

是否有可能告诉路由器继续匹配路径，尽管它已经找到了匹配项？
类似于

.htaccess

文件中的匹配功能？

Answer 1

单击链接后，您将被重定向到

/home/users

路线，因为您使用的是与用户路线正确匹配的命名路线。

重新加载页面时，路由器会从上到下检查第一个与模式匹配的路由。这确实是您示例中名为

home

的路线。

Vue 路由器将返回第一个匹配的路由。

这就是为什么我们通常将 404 路径放在路由的底部，如下所示：

const routes = [
  ...allRoutes,
  { path: "*", component: PageNotFound }
]

意思是如果没有路由匹配的话，就会匹配并显示404页面。

如果您想做一些非常具体的匹配，也可以。这是 vue 路由器文档