当部分路由与定义的路由匹配时，如何使 vue 路由器中的“捕获所有其他”路由也捕获 url？答案

【问题标题】：How can I make a "catch all other" route in vue router also catch the url when part of it matches a defined route?当部分路由与定义的路由匹配时，如何使 vue 路由器中的“捕获所有其他”路由也捕获 url？
【发布时间】：2021-09-30 21:55:03
【问题描述】：

我已经按照这里的建议实施了一条包罗万象的路线

https://medium.com/@ishoshot/page-not-found-on-reload-vuejs-netlify-c71716e97e6

但是它不会捕获部分匹配已定义路由的 url。例如

    routes: [
{
  path: "/album/:album",
  name: "album",
  component: Album,
},
{
  path: "/",
  name: "home",
  component: Home,
},
{
  path: "/*",
  component: NotFound,
},
],

mysite.com/foo 将指向 NotFound 组件，但 mysite.com/album/foo 将指向 Album 组件将尝试显示不存在的专辑“foo”。

专辑托管在理智上。

我在想如果找不到专辑，我可以在 Album 组件中通过重定向来处理这个问题，但是直接转到 NotFound 会更干净如果可能，组件。

谢谢！

【问题讨论】：

标签： javascript vue.js redirect vue-router

【解决方案1】：

在您的情况下，我将显示一条关于未找到与字段“foo”相关的数据的消息。（可以是包含文本“未找到数据”的表格或仅包含一行文本“未找到数据”）。我认为我刚才提到的解决方案是合理的，我使用和正在使用的大多数网站都是这样做的。

【讨论】：

【解决方案2】：

如果您使用的是 Vue3，请替换：

{
  path: "/*",
  component: NotFound,
}

以下内容：

{
    path: '/:pathMatch(.*)*',
    component: NotFound
}

Vue3 不再支持旧的 catchpath '*'。有关此更新的更多信息，请参阅docs。

【讨论】：