解决 vue-router 报 NavigationDuplicated 错误
控制台报错:
原因:
vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise,假如没有回调函数,错误信息就会交给全局的路由错误处理。如截图:Uncaught (in promise)
方案1: 降版
npm i vue-router@3.0 -S
方案2: 禁止全局路由错误处理打印
在引入 vue-router 的文件中增加以下代码:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function repalce(location, onResolve, onReject) {
if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
return originalReplace.call(this, location).catch(err => err)
}
方案3: 为每一个增加回调函数
this.$router.push('/location').catch(err => {err});
this.$router.replace('/location').catch(err => {err});