启动路由器时出现意外错误：错误：缺少必需的参数“catchAll”答案

【问题标题】：Unexpected error when starting the router: Error: Missing required param “catchAll”启动路由器时出现意外错误：错误：缺少必需的参数“catchAll”
【发布时间】：2021-07-21 05:24:51
【问题描述】：

有人知道我为什么收到这个警告吗？

[Vue路由器警告]：启动路由器时出现意外错误：错误：缺少必需的参数“catchAll”

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['users/isAuthenticated']

  if (!isAuthenticated && to.name !== 'Login' && to.name !== 'Registration' && to.name !== '404') {
    next({
      name: 'Login'
    })
  } else if (isAuthenticated && store.getters['users/getUserName'] !== to.params.userName)   {
    next({
      name: '404'
    })
  } else {
    next()
  }

})

【问题讨论】：

标签： vue.js vue-router vue-router4

【解决方案1】：

我看到你在 Vuejs.org 论坛上发布了同样的问题：

https://forum.vuejs.org/t/unexpected-error-when-starting-the-router-error-missing-required-param-catchall/115388/3

为了完整起见，如果其他人遇到同样的问题（就像我一样），因为您正在按名称 name: '404' 导航到代码中的路线，因此您必须添加 * 以获取重复模式。

您原来的路由器可以捕获 Vue 论坛上发布的所有内容：

{
  path: '/:catchAll(.*)',
  name: '404',
  component: () => import(/* webpackChunkName: "404" */'@/views/404')
}

你需要使用/:catchAll(.*)*，如下：

{
  path: '/:catchAll(.*)*',
  name: '404',
  component: () => import(/* webpackChunkName: "404" */'@/views/404')
}

根据论坛上的回答，有关更多信息，请参阅 Vue 路由器文档中的以下参考页面：

https://next.router.vuejs.org/guide/migration/index.html#removed-star-or-catch-all-routes https://next.router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

【讨论】：