当前位置：首页 > article >正文

Vue编程式路由跳转多次执行报错

article 2025/1/26 23:02:39

文章目录

- - 问题描述
  - 路由跳转的两种形式
  - 问题原因
  - 解决方案
  - - 1. 传递回调函数
    - 2. 重写 `push` 方法（推荐）
  - 代码实现细节解析
  - - 1. 为什么不能直接使用 `this.originalPush()`？
    - 2. `this` 的指向是什么？
    - 3. `call(this)` 的作用
    - 4. 异常捕获的意义
  - 其他注意事项
  - 总结

问题描述

在使用 Vue.js 的 vue-router 进行编程式路由跳转时，如果多次执行跳转到当前路由（参数不变），会抛出 NavigationDuplicated 的警告错误。这种错误通常发生在用户频繁点击按钮或执行某些操作时，导致多次触发相同的路由跳转。

路由跳转的两种形式

声明式导航：通过 <router-link> 标签进行导航，vue-router 底层已经处理好了重复导航的问题，因此不会出现此类警告。
编程式导航：通过 this.$router.push 或 this.$router.replace 方法进行导航，可能会出现 NavigationDuplicated 警告。

问题原因

在 vue-router 3.5.3 及以上版本中，push 和 replace 方法返回一个 Promise。如果多次执行相同的路由跳转，vue-router 会检测到重复导航，并抛出 NavigationDuplicated 警告。这是为了提醒开发者避免不必要的路由跳转，从而优化应用性能。

解决方案

1. 传递回调函数

通过给 push 方法传递成功和失败的回调函数，可以捕获到当前错误，从而避免警告。

this.$router.push(
  {
    name: "search",
    params: { keyword: this.keyword },
    query: { k: this.keyword.toUpperCase() }
  },
  () => {}, // 成功回调（空函数）
  () => {}  // 失败回调（空函数）
);

缺点：

治标不治本，其他组件中仍需重复添加回调函数。
代码冗余，维护成本高。

2. 重写 `push` 方法（推荐）

通过全局重写 VueRouter 原型上的 push 方法，彻底解决重复导航问题。

// 保存原始的 push 方法
const originalPush = VueRouter.prototype.push;

// 重写 push 方法
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    // 若用户手动传递了回调函数，直接调用原始方法
    return originalPush.call(this, location, onResolve, onReject);
  }
  // 若未传递回调函数，捕获 Promise 异常
  return originalPush.call(this, location).catch(err => err);
};

优点：

一劳永逸，所有组件中均生效。
减少代码重复，提升可维护性。

代码实现细节解析

1. 为什么不能直接使用 `this.originalPush()`？

作用域问题：
originalPush 是一个通过 const 定义的变量，保存了原始 push 方法的引用。
它并不属于 VueRouter 实例的成员属性，因此在重写的 push 方法中，this（指向 VueRouter 实例）无法直接访问 originalPush。
若尝试调用 this.originalPush()，会导致 undefined is not a function 错误。
正确调用方式：
必须通过 originalPush.call(this, ...) 显式绑定 this，确保原始方法在 VueRouter 实例的上下文中执行。

2. `this` 的指向是什么？

在重写的 push 方法中，this 指向 调用该方法的 VueRouter 实例。
例如，当组件中调用 this.$router.push() 时：
- this.$router 是 VueRouter 类的实例。
- 因此，重写后的 push 方法中的 this 即为该实例。

3. `call(this)` 的作用

绑定上下文：
call 方法用于显式指定函数执行时的 this 值。
若直接调用 originalPush(location)，原始 push 方法中的 this 会指向全局对象（如 window 或 undefined），导致路由操作失败。
类比解释：
可以理解为“借用”原始方法的能力，但明确告诉它操作发生在当前 VueRouter 实例的上下文中，类似于使用他人的工具时指定工作台。