路由多次执行相同push|replace问题

一、场景

项目中实现商品搜索功能，用户可以从导航栏点击分类或搜索框输入关键词搜索商品，通过编程式导航携带参数给Search页面。此时用户可能多次点击同一分类或者搜索同一关键词，导致出现NavigationDuplicated问题。

二、原因

声明式导航并没有这个问题，因为vue-router底层已经处理好了。

而编程式导航进行路由跳转时会出现，因为最新的vue-router引入promise。

由于push方法返回promise对象，需要传递成功和失败两个参数，代码编写时push没有传递，如果没有通过参数指定成功或者失败回调函数，就返回一个promise来指定成功/失败的回调。且内部会判断如果要跳转的路径和参数都没有变化，会抛出一个失败的promise。

三、解决方法

需要给push方法传递成功和失败的回调函数，由于多次传递比较麻烦，因此可以直接重写push和replace方法（router配置文件中修改）

import Vue from "vue"
import vueRouter from "vue-router"
 
Vue.use(vueRouter)
 
import routes from '@/router/routes'
import { getToken,removeToken } from "@/utils/token"
import store from "@/store"
//保存原来的push方法和replace方法
const originPush = vueRouter.prototype.push
const originReplace = vueRouter.prototype.replace
 
vueRouter.prototype.push = function (location, resovled, rejected) {
    if (resovled && rejected) {
        originPush.call(this, location,resovled, rejected)
    } else {
        originPush.call(this,location, () => { }, () => { })
    }
}
vueRouter.prototype.replace = function (location, resovled, rejected) {
    if (resovled && rejected) {
        originReplace.call(this, location,resovled, rejected)
    } else {
        originReplace.call(this, location,() => { }, () => { })
    }
}