vue-router 路由跳转解决跳转到当前路由报错问题

最新推荐文章于 2024-07-21 20:16:04 发布

果粒橙er

最新推荐文章于 2024-07-21 20:16:04 发布

阅读量2.2k

点赞数 3

分类专栏：项目优化小技巧文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/misschengispink/article/details/122963923

版权

项目优化小技巧专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在vue项目中当路由跳转当前页面时会报错

vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2066:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2036:15)
    at HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2334:18)
    at HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2261:8)
    at HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2716:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3035:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3034:12)
    at VueComponent.handleLogin (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Login/index.vue?vue&type=script&lang=js&:17:20)
    at click (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f39d854-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Login/index.vue?vue&type=template&id=aeba673c&scoped=true&:18:34)

为了解决这个问题在router文件夹index.js里配置了以下代码就可以解决啦：

// 解决跳转到当前路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err)
}