vue-router报错: Uncaught (in promise) undefined

最新推荐文章于 2025-05-18 11:30:30 发布

宛宛心里的月亮

最新推荐文章于 2025-05-18 11:30:30 发布

阅读量8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：解决问题文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_40815009/article/details/105787319

解决问题专栏收录该内容

7 篇文章

订阅专栏

在Vue项目中遇到登录成功后未跳转且报错的问题，尝试将router.push替换为router.replace未能解决问题。错误发生在beforeEach钩子中，由于token定义在外部导致在登录后路由被打断。解决方案是将token定义移到beforeEach内部，确保在导航到目标路由之前正确获取token，从而避免路由被中断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景描述:
vue项目，做登录页，点击登录按钮时，nextwork显示已经登录成功，但是console中报错
vue-router.esm.js?8c4f:2089 Uncaught (in promise) undefined
并且没有跳转到默认页面。
参考别人博客以为是vue-router跳转方法的问题。

*1.router.push(location)=====window.history.pushState*
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

*2.router.replace(location)=====window.history.replaceState*
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
因此把push改为了replace,然而并没有解决问题。

-----------------------------------------------------分割线------------------------------------------------------------

//导航守卫 router.beforeEach判断用户是否登录
const token = localStorage.getItem('token');
router.beforeEach((to, from, next) => {
  if(to.path == '/login'){
    next()
    return
  }
  if(token == null && to.path != '/login'){
    next('/login')
  }else{
    next()
  }
})

开始的时候我是这样写token定义在beforeEach前，然后发现登录页刷新后再次登录，路由无法跳转，路由被打断。原因:登录成功后获已经获取了token,此时to已经变成了目标组件，我的是用户模块‘/userMg’，但token定义在了外部还是为null,所以执行next(’/login);
router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。
所以在push到‘/userMg’之前，导航到了‘/login’路由，因此执行onAbort中断跳转。
解决方式：const token定义到beforeEach内部
–end