路由跳转的问题及重写push和replace

首先路由跳转有两种形式：声明式导航，编程式导航

当编程式路由跳转到当前路由（参数不变）多次执行会抛出`NavigationDuplicated的警告错误

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

为什么会出现这类错误呢？

因为在最新的vue-router中引入了promise，执行this.$router.push()会返回一个promise函数，有成功和失败两种状态,所以可以在使用this.$router.push()时传入两个回调函数，可以解决这个问题

this.$router.push({
    name: "路由名"  //必需要路由规则设置name别名
    params:{ // 使用params传参必须使用路由名 不可以写path
	   路由设置中定义的path/:后面参数名:传的参数值
	   userName:'王逗逗'
           }
    },
    ()=>{},
    ()=>{}
)

其中第二个是成功的回调resolve，第三个是失败的回调reject

但是上述的写法只对当前有效，如果想对全局的路由跳转都生效则需要重写push和replace

重写push和replace

首先我们需要知道，this.$router是VueRouter构造函数的实例对象，在注册路由时被挂载到了vue组件实例上， 其中this.$router上并没有push方法，push是VueRouter原型对象上的方法

所以我们可以在引入vue-router的地方对push和replace进行重写

第一步：先将VueRouter原型对象上的push保存一份

const originPush = vueRouter.prototype.push

第二步：重写push和replace

VueRouter.prototype.push = function (location, resolve, reject) {
	if (resolve && reject) {
		originPush.call(this.location, resolve, reject)
	}else {
		originPush.call(this.location, ()=>{ }, ()=>{ })
	}
}

这里面需要注意的点是，

1.传入的参数 第一个为要跳转的路由参数，第二个是成功的回调，第三个是失败的回调，

2.originPush函数的this是指向windows，所以在调用时需要使用call重新调整originPush的this指向，使它指向VueRouter

replace重写同上