vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

一念格

于 2021-06-04 20:27:43 发布

阅读量6k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue 前端 javascript

本文链接：https://blog.youkuaiyun.com/chenjun1992/article/details/117572522

Vue学习专栏收录该内容

5 篇文章

订阅专栏

在编写Vue应用的退出登录功能时，遇到一个问题：由于退出登录按钮位于Home页面，导致退出后重定向到Home页面引起冗余导航错误。为了解决这个问题，只需在路由设置文件index.js中覆盖VueRouter的push方法，通过捕获并处理可能抛出的错误，从而避免报错。具体做法是在index.js中添加代码，将原始push方法保存并覆盖push方法，确保在调用push时能正确处理错误。

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

在这里插入图片描述
今天在写退出登录页面的时候遇到了这个问题，因为退出登录按钮本身在Home页面上，即路由地址为’ / ’ 的页面，退出登录后重定向到的页面依然是Home页面，也就是所谓的产生了冗余导航，vue-router便报错了。

解决办法：
将如下代码加入到路由设置文件index.js中即可

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

在这里插入图片描述