vue-router@4.2.5路由导航报错：使用router.push页面未正常跳转

报错场景 #

使用router.push进行页面跳转时，页面未完成导航，控制台出现如下错误：

[Vue Router warn]: uncaught error during route navigation:
warn @ vue-router.mjs:35
vue-router.mjs:3471  TypeError: Cannot use 'in' operator to search for 'catch' in undefined

常见原因及修复方案 #

• 路由守卫函数未正确返回值
  检查全局路由守卫（如router.beforeEach）、路由独享守卫（beforeEnter）或组件内守卫（beforeRouteEnter等），确保函数有明确返回值：

  • 允许导航时，返回true或直接return（Vue Router 4+支持）
  • 取消导航时，返回false
  • 需要重定向时，返回路由对象（如return { path: '/login' }）
  • 异步操作场景下，返回一个Promise，确保Promise能正确resolve或reject

  错误示例：

  router.beforeEach((to, from) => {
    // 无返回值会触发报错
    if (to.meta.requireAuth && !isLogin()) {
      router.push('/login')
    }
  })
  

  修复示例：

  router.beforeEach((to, from) => {
    if (to.meta.requireAuth && !isLogin()) {
      return { path: '/login' } // 返回路由对象实现重定向
    }
    return true // 允许正常导航
  })
  

• router.push使用格式错误
  确保router.push的参数格式合法：传递字符串路径需正确，传递对象时属性完整。避免在路由守卫内嵌套调用router.push却不返回值，改用返回路由对象的方式完成重定向。

• 异步路由加载异常
  如果使用异步组件加载路由，确认组件导入语法正确，比如：

  // 正确的异步路由写法
  const Home = () => import('../views/Home.vue')
  

  避免因导入路径错误、组件文件缺失导致加载失败，进而引发导航异常。

内容的提问来源于stack exchange，提问作者王晓宇