vue2（路由3）编程式导航重复跳转同一路由报错解决

目录

一、编程式路由跳转

1、报错信息展示： NavigationDuplicated(重复导航)  

2、报错原因分析

3、报错解决方案

3-1、方案一：

局部处理：对单个路由进行处理。

缺点：其他的路由依旧报错，每次都得加重复的代码来解决报错。

3-2、方案二：

全局处理：对所有路由进行处理，重写VueRouter.prototype原型对象的push|replace方法。

具体代码实现：src/router/index.js

二、声明式路由跳转

一、编程式路由跳转

1、报错信息展示： NavigationDuplicated(重复导航)  

 2、报错原因分析

vue-router3.1.0之后, 引入了push()的promise的语法, 如果没有通过参数指定回调函数就返回一个promise来指定成功/失败的回调, 且内部会判断如果要跳转的路径和参数都没有变化, 会抛出一个失败的promise。

3、报错解决方案

3-1、方案一：

局部处理：对单个路由进行处理。

缺点：其他的路由依旧报错，每次都得加重复的代码来解决报错。

//以search组件为例
// 1、catch()处理错误
this.$router.push(`/search/${this.keyword}`).catch(() => {})
// 2、指定成功的回调函数
this.$router.push(`/search/${this.keyword}`, () => {})
// 3、指定失败的回调函数
this.$router.push(`/search/${this.keyword}`, undefined, () => {})

3-2、方案二：

全局处理：对所有路由进行处理，重写VueRouter.prototype原型对象的push|replace方法。

具体代码实现：src/router/index.js

//引入Vue
import Vue from 'vue'
//引入vue-router
import VueRouter from 'vue-router';
//备份原型对象已有的push|replace方法
let push = VueRouter.prototype.push;
let replace = VueRouter.prototype.replace;
//重写VueRouter.prototype原型对象的push|replace方法
VueRouter.prototype.push = function (location) {
    //调用push方法且篡改push方法内部this指向->vueRouter类的实例
    push.call(this, location, () => { }, () => { });
}
VueRouter.prototype.replace = function (location) {
    //调用push方法且篡改push方法内部this指向->vueRouter类的实例
    replace.apply(this, [location, () => { }, () => { }]);
}
//安装插件
Vue.use(VueRouter);

报错解决，vue3（路由4）中此bug官方已解决。

二、声明式路由跳转

声明式路由跳转没有此问题？因为默认传入了成功的空回调函数。