VueJS登录成功后$router.push触发catch块报错，求排查

可能的原因及对应排查修复步骤 #

1. 路由名称/路径不匹配 #

检查router/index.ts里dashboard路由的配置：

• 如果你用$router.push('dashboard')，Vue Router会优先匹配name为dashboard的路由，如果路由定义里的name不是这个，直接会报错。
• 确认路由配置示例：

  const routes = [
    // ...其他路由
    {
      path: '/dashboard',
      name: 'dashboard', // 必须和push的字符串一致，或者改用路径写法
      component: () => import('../views/Dashboard.vue'),
      meta: { requiresAuth: true }
    }
  ]
  

• 修复：要么把路由name改成dashboard，要么改用路径跳转：$router.push('/dashboard')

2. 路由守卫拦截跳转 #

模板自带的权限守卫可能会拦截未授权的跳转：

• 如果dashboard路由加了meta: { requiresAuth: true }，但登录后没正确更新认证状态（比如没把用户信息/令牌存入store或localStorage），守卫会直接拦截跳转并抛出错误。
• 检查登录逻辑：必须先更新认证状态，再执行跳转：

  // login.vue 登录逻辑示例
  fetch('/api/login', { /* 请求配置 */ })
    .then(res => res.json())
    .then(data => {
      // 先保存认证信息
      localStorage.setItem('authToken', data.token)
      this.$store.dispatch('auth/saveUserInfo', data.user)
      // 再执行跳转
      this.$router.push({ name: 'dashboard' })
    })
    .catch(err => console.error('错误详情:', err))
  

• 同时检查router/index.ts里的全局守卫逻辑，确认它能正确读取到你设置的认证状态：

  router.beforeEach((to, from, next) => {
    const isLoggedIn = localStorage.getItem('authToken') || this.$store.getters['auth/isLoggedIn']
    if (to.meta.requiresAuth && !isLoggedIn) {
      next('/login')
    } else {
      next()
    }
  })
  

3. 错误处理覆盖不全 #

登录逻辑的Promise链中，后续代码的错误会进入catch块：

• 比如fetch请求成功，但更新store时抛出错误，或者跳转代码本身有问题，都会触发catch。
• 必须在catch里打印完整错误信息，定位具体问题：

  .catch(err => {
    console.error('登录流程错误:', err)
    console.error('错误栈:', err.stack)
  })
  

4. Vue Router版本兼容性 #

确认模板使用的Vue Router版本：

• Vue Router 3.x（对应Vue 2）支持$router.push('dashboard')这种字符串写法；
• 如果是Vue 3的Vue Router 4.x，Options API写法不变，但如果用Composition API需要用useRouter()，不过模板是Options API的话可以忽略这点。
• 检查package.json里的vue-router版本，确保写法匹配。

快速排查技巧 #

1. 临时注释路由守卫的权限校验代码，测试跳转是否正常，判断是否是守卫的问题；
2. 直接用路径$router.push('/dashboard')替代名称跳转，排除路由name配置错误。

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