Vue 路由跳转错误 NavigationDuplicated: Avoided redundant navigation to current location

Vue 中通过 $router.push 进行页面跳转时，出现错误提示

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Avoided redundant navigation to current location: "/"."

found in

---> <Header> at src/components/Header.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
eval @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 NavigationDuplicated: Avoided redundant navigation to current location: "/".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1959:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1929:15)
    at HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2223:18)
    at HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2153:8)
    at HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2623:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2951:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2950:12)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"126c737d-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/components/Header.vue?vue&type=template&id=61dd7a3d&scoped=true& (http://localhost:8080/static/js/app.js:1151:1), <anonymous>:27:34)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)

里面关键的信息就是 "NavigationDuplicated: Avoided redundant navigation to current location: "/"."

出现此类错误主要原因就是因为 $router.push 跳转时，与当前地址相同

解决方法就是在 router 文件夹下的 index.js 中加入下面的代码

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

完整代码就是

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

// 解决 NavigationDuplicated: Avoided redundant navigation to current location 报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const routes = [
  {
......

未经允许不得转载，本文唯一地址： https://www.caorui.net/blog/147173074460999680.html

很赞哦！ (0)