vue项目记录3

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

今日继续的是第二天的项目内容，首先主要就是解决一个问题，也就是我们接下来要提到的这个

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

• 路由跳转有两种形式：声明式导航，编程式导航
• 声明式导航没有这类问题，因为vue-router底层已经处理好了

• 通过给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。通过底部的代码，可以实现解决错误

this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},(error)=>{
        console.log(error)
});

这种方法治标不治本，将来在别的组件当中push|replace，编程式导航还是有类似错误。(我们可重写也可不重写)

• this：当前组件实例（search）
• this.$router属性：当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性
• push：VueRouter类的一个实例

所以对原型方法push进行修改，修改结果就会作用域组件实例的$router实例。push是VueRouter类的一个原型方法，$router是VueRouter类的实例。重写实际上是对VueRouter上的原型对象上的push方法进行重写

步骤如下

• 先把VueRouter原型对象的push保存一份

let originPush = VueRouter.prototype.push;
// console.log(originPush);

• 重写push|replace

  • 第一个参数：告诉原来的push方法，你往哪里跳转（传递哪些参数）

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

• call||apply区别

  • 相同点：都可以调用函数一次，都可以篡改函数上下文一次
  • 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组

location:往哪传

resolve：成功的回调

reject：失败的回调

这个错误相信很多像我一样的初学者写代码时都会遇到，多加练习以后即可以很快解决了