vue：NavigationDuplicated错误解决以及原理分析

vue：NavigationDuplicated错误解决以及原理分析

路由跳转有两种形式：声明式跳转、编程式跳转
声明式跳转不存在此问题，原因使vue-router底层已经处理好了
编程式跳转会出现此问题的原因是因为vue-router版本^3.5.3引入了promise，有返回值
解决方案:在vue-router中添加如下代码

Vue.use(VueRouter)
//先保存router原型对象的push
let origin = VueRouter.prototype.push
//第一个参数：告诉push方法往哪里跳转，并传递哪些参数
VueRouter.prototype.push = function(location, resolve, reject) {
    if (resolve && reject) {
    //js中的每个函数都有call和apply方法，唯一区别就是call传参用逗号隔开，apply使用数组，相同点都可以调用函数一次
        origin.call(this, location, resolve, reject)
    } else {
        origin.call(this, location, () => {}, () => {})
    }
}
VueRouter.prototype.replace = function(location, resolve, reject) {
    if (resolve && reject) {
    //js中的每个函数都有call和apply方法，唯一区别就是call传参用逗号隔开，apply使用数组，相同点都可以调用函数一次
        origin.call(this, location, resolve, reject)
    } else {
        origin.call(this, location, () => {}, () => {})
    }
}

2021-12-17