vue 路由 NavigationDupLicated 解决

vue 路由 NavigationDupLicated 解决

1. 编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDupLicated 的警告错误。怎么解决

为什么编程式导航进行路由跳转的时候，就会有这种警告错误呢

1. 因为 vue-router:3.5.3 版本引入了 promise，假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

解决方法

方法一 运用编程式路由的时候加上成功，失败的回调

this.$router.push(
  { name: "home", params: { id: 1 } },
  () => {}, // 成功回调
  () => {} //失败回调
);

方法二 重写 push，replace

1. 上述方法治标不治本，每次用编程式路由都要加成功失败回调
2. 重写 push，replace 思路:

• $router 是 vueRouter 类的一个实例
• push 方法在 vueRouter 的 prototype 上

// 在路由index.js文件中
// 重写push
// 保存原有的push方法
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location, resolve, reject) {
  // 如果用户传递过来了成功失败回调
  // 调用原有push方法
  if (resolve && reject) {
    //这里要注意上下文中的this为vueRouter 这里如果直接调用 originalPush 中的this是window，我们要将this改为vueRouter，这时就要用this冒充call
    originalPush.call(this, location, resolve, reject);
  } else {
    // 用户没有传递成功失败回调，我们自动加上
    originalPush.call(this,location,() => {},() => {}
    );
  }
};

// 在路由index.js文件中
// 重写replace
// 保存原有的replace方法
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originalReplace.call(this, location, resolve, reject);
  } else {
    originalReplace.call(this,location,() => {},() => {}
    );
  }
};