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

最新推荐文章于 2023-10-25 14:59:54 发布

原创最新推荐文章于 2023-10-25 14:59:54 发布 · 6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript

Vue学习专栏收录该内容

5 篇文章

订阅专栏

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

在这里插入图片描述
今天在写退出登录页面的时候遇到了这个问题，因为退出登录按钮本身在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)
}