无废话篇,直接上解决办法
原因:这是因为你多次触发路由跳转事件,且跳转的url地址都是同一个。
解决方法:重写push / replace方法
在入口文件(main.js)中添加
import VueRouter from 'vue-router'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err)
}
new Vue({
render: h => h(App)....
上面的代码还有第二种写法,实现原理都一样
import VueRouter from 'vue-router'
let originPush =VueRouter.prototype.push;
let originReplace =VueRouter.prototype.replace;
VueRouter.prototype.push=function(location,resolve,reject){
if(resolve&&reject){
originPush.call(this,location,resolve,reject)
}else{
originPush.call(this,location,()=>{},()=>{})
}
}
VueRouter.prototype.replace=function(location,resolve,reject){
if(resolve&&reject){
originReplace.call(this,location,resolve,reject)
}else{
originReplace.call(this,location,()=>{},()=>{})
}
}
new Vue({
render: h => h(App)....
第二种方式:在push方法后面加上两个参数resolve和reject
this.$router.push('/search/'+this.keyWord)
替换成
this.$router.push('/search/'+this.keyWord,()=>{},()=>{})
废话部分:(解释一下原理)
这个问题是在vue-router在3的版本之后就有的,原因是因为编程式路由在使用push或者replace方法进行路由跳转,底层是使用了ES6中的Promise,每次push或者replace之后就会返回一个promise对象,能够执行回调处理导航成功或者失败的情况。
为什么会报NavigationDuplicated的错误?这其实是
Vue Router 提供了一种机制来避免重复导航,从而提高应用程序的性能和稳定性。