Vue Router实现用户名参数不匹配跳404及catchAll报错解决

遇到的启动报错和逻辑漏洞来自三个可直接定位的代码问题：

• 命名路由参数缺失报错：你定义的404路由path为/:catchAll(.*)，该路由本身携带必填的catchAll路径参数。当你在守卫里用next({name: '404'})的命名路由方式跳转时，没有给这个必填参数传值，直接触发路由初始化时的参数校验报错。
• JS语法隐藏错误：你代码里所有store.getters后面的引号是全角排版引号（‘’），不是JS语法识别的半角引号（''），运行时会直接抛语法错误。
• 守卫逻辑边界缺失：没有判断当前路由是否存在userName参数，直接对比to.params.userName和登录用户名，虽然不会抛错，但属于冗余的无效计算。

1. 重构路由定义，解决参数校验报错 #

把404页面的路由改为无路径参数的固定路径，原兜底匹配路由仅做路径重定向，避免命名路由跳转时的参数依赖，调整后的路由配置：

const routes = [
  // 原有带userName参数的业务路由保持不变
  {
    path: '/:userName/categories',
    name: 'Categories',
    component: () => import(/* webpackChunkName: "home" */'@/views/Categories'),
    props: true
  },
  {
    path: '/:userName/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "home" */'@/views/Products'),
    props: true
  },
  {
    path: '/:userName/settings',
    name: 'Settings',
    component: () => import(/* webpackChunkName: "home" */'@/views/Settings'),
    props: true
  },
  // 公开路由保持不变
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */'@/views/Login')
  },
  {
    path: '/registration',
    name: 'Registration',
    component: () => import(/* webpackChunkName: "registration" */'@/views/Registration')
  },
  // 固定无参数的404页面路由，消除命名路由的参数依赖
  {
    path: '/404',
    name: 'NotFound',
    component: () => import(/* webpackChunkName: "404" */'@/views/404')
  },
  // 路径兜底：所有未匹配到的路径直接重定向到固定404页
  {
    path: '/:catchAll(.*)',
    redirect: '/404'
  }
]

如果不想改动404路由的path结构，也可以在跳转时手动传递catchAll参数，比如next({ name: '404', params: { catchAll: 'not-found' } })，但这种写法维护成本高，容易在其他跳转404的位置漏传参数，固定路径方案是更稳妥的通用写法。

2. 优化全局守卫逻辑，补全边界判断 #

替换所有全角引号，增加参数存在的前置校验，调整后的守卫代码：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['users/isAuthenticated']
  const currentLoginName = store.getters['users/getUserName']
  // 无需鉴权的公开路由名单
  const publicRouteNames = ['Login', 'Registration', 'NotFound']

  // 未登录状态：拦截非公开路由，跳登录页
  if (!isAuthenticated && !publicRouteNames.includes(to.name)) {
    return next({ name: 'Login' })
  }

  // 已登录状态：仅对带userName参数的路由做匹配校验，参数不匹配直接跳404
  if (isAuthenticated && to.params.userName && currentLoginName !== to.params.userName) {
    return next({ name: 'NotFound' })
  }

  next()
})

调整后完全匹配需求场景：

• 已登录用户访问/joe/categories时，路径参数userName为joe，和当前登录用户名一致，正常渲染Categories组件
• 已登录用户访问/james/categories时，路径参数userName为james，和当前登录用户名不匹配，直接重定向到固定404页面
• 未登录用户访问任意需鉴权的路由，统一跳转到登录页，不会触发参数缺失报错

内容的提问来源于stack exchange，提问作者kasp3rsky