前端项目第二天声明式路由|编程式路由以及NavigationDuplicated: Avoided redundant navigation to current location问题

一、声明式路由|编程式路由区别

• 声明式导航router-link,可以进行路由的跳转

<router-link to="地址">内容 </router-link>`

• 编程式导航push|replace，可以进行路由的跳转，声明式导航能做的，编程式导航都能做，编程式导航还能做一些其他业务,在方法中添加（比如说填写表单后再跳转）

const 方法= (data){
//其他函数体
router.push('跳转的页面')
}

一、编程式路由出现的问题

当重复点击同一个编程式路由跳转时会出现
ue-router.esm.js:1728 Uncaught (in promise) NavigationDuplicated:
Avoided redundant navigation to current location:错误即router.push() 或 router.replace() 导航到一个当前已经处于的路由时，
vuerouter会认为这是冗余的操作，也就是说处于当前页面再次发起路由跳转至当前页面，不再进行处理并抛出错误不会重新渲染组件或执行导航钩子。
原因：
“vue-router”:引入了promise，promise要求有成功和回调的函数
解决方法：

//先保存一份原型对象上的push方法
let originPush=VueRouter.prototype.push
let originReplace=VueRouter.prototype.replace
// 重写push|replace
// location:往哪跳

VueRouter.prototype.push=function(location,resolve,reject){
    if(resolve || reject){
        // call|apply
    // 相同点：都可以调用函数一次，都是篡改函数的上下文一次（也就是确保this指针指向vueRouter实例）
    // 不同点：call与apply传递参数，前者可以传递多次，且用“，”隔开，后者执行，要传递数组
    originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,()=>{},()=>{})
    }
}
VueRouter.prototype.replace=function(location,resolve,reject){
    if(resolve || reject){
        // call|apply
    // 相同点：都可以调用函数一次，都是篡改函数的上下文一次
    // 不同点：call与apply传递参数，前者可以传递多次，且用“，”隔开，后者执行，要传递数组
    originReplace.call(this,location,resolve,reject)
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}