解释 Vue Router 中的导航故障 (Navigation Failure) 类型，以及如何捕获和处理路由跳转失败的情况。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，晚上好！欢迎来到今天的“Vue Router 踩坑避雷指南”特别讲座。今天咱们不聊情怀，就聊点实在的——Vue Router 导航故障。

想象一下，你信心满满地写了一段路由跳转代码，结果浏览器控制台给你甩了个大大的错误，页面一片空白，用户体验瞬间降到冰点。是不是很熟悉？别慌，今天咱们就来一起剖析这些导航故障，教你如何优雅地捕获和处理它们，让你的 Vue 应用稳如老狗。

开场白：路由跳转，看似简单，实则暗藏玄机

Vue Router 负责管理你的 Vue 应用的页面跳转，它允许你定义不同的路由规则，并将这些规则映射到不同的组件。通常情况下，路由跳转非常顺利，用户点击链接，页面瞬间切换。但总有些时候，事情不会那么顺利。就像人生一样，总会遇到一些挫折。在 Vue Router 的世界里，这些挫折就表现为导航故障。

第一部分：导航故障的类型大揭秘

Vue Router 3.1.0 引入了导航故障的概念，目的是为了更清晰地告诉你，路由跳转到底出了什么问题。这些故障被分为不同的类型，每种类型都代表着一种特定的错误情况。咱们先来认识一下这些“捣蛋鬼”：

故障类型	描述	触发场景
`NavigationFailure`	所有导航故障的基类。你可以把它理解为“我也不知道发生了啥，反正就是跳转失败了”。一般情况下，你应该关注更具体的故障类型。	当路由跳转失败时，但没有其他更具体的故障类型与之匹配。
`NavigationDuplicated`	顾名思义，重复导航。这意味着你尝试跳转到当前已经在的路由。Vue Router 默认会阻止重复导航，因为它可能会导致一些副作用（比如重复触发数据请求）。	当你尝试使用 `router.push` 或 `router.replace` 跳转到当前路由时。
`NavigationAborted`	导航被中止。这通常发生在导航守卫中（比如 `beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave`），你在守卫函数中调用了 `next(false)` 或 `next(new Error())`，显式地阻止了导航。	当你在导航守卫中显式地阻止导航时。
`NavigationCancelled`	导航被取消。这种情况通常发生在有新的导航发起时，之前的导航会被取消。比如，用户快速点击了两个不同的链接，第一个链接的导航可能还没完成，就被第二个链接的导航给取消了。	当有新的导航发起，并且之前的导航还没完成时。
`NavigationRedirected`	导航被重定向。这发生在导航守卫中，你调用了 `next('/new-route')` 将导航重定向到另一个路由。虽然 technically 导航成功了，但它实际上跳转到了另一个地方。这个其实不能算是错误，是一种正常的流程。	当你在导航守卫中将导航重定向到另一个路由时。
`NavigationRejected`	导航被拒绝。这通常发生在异步组件加载失败或路由守卫返回一个 rejected 的 Promise 时。例如，你的异步组件的网络请求失败了，或者你的路由守卫因为某些原因拒绝了跳转（比如用户没有权限）。	当异步组件加载失败或路由守卫返回一个 rejected 的 Promise 时。

重点： 记住这些故障类型，它们是你诊断问题的关键！

第二部分：如何捕获和处理导航故障？

现在我们知道了有哪些类型的导航故障，接下来就要学习如何捕获和处理它们。Vue Router 提供了几种方式来处理这些故障：

catch 捕获 router.push 和 router.replace 的错误

这是最直接的方式。router.push 和 router.replace 方法会返回一个 Promise，你可以使用 catch 方法来捕获任何发生的错误。

// 假设你有一个按钮，点击后会跳转到另一个路由
<button @click="goToRoute">Go to Route</button>

// 在你的 Vue 组件中
methods: {
  goToRoute() {
    this.$router.push('/some-route')
      .catch(error => {
        // 这里捕获到导航故障
        console.error('导航失败:', error);

        if (this.$router.isNavigationFailure(error)) {
          // 可以进一步判断故障类型
          if (this.$router.isNavigationDuplicated(error)) {
            console.warn('重复导航，忽略');
          } else if (this.$router.isNavigationAborted(error)) {
            console.warn('导航被中止');
          } else if (this.$router.isNavigationCancelled(error)) {
            console.warn('导航被取消');
          } else if (this.$router.isNavigationRejected(error)) {
            console.error('导航被拒绝');
          } else {
            console.error('未知导航故障');
          }
        } else {
          // 其他类型的错误，可能不是 Vue Router 引起的
          console.error('非导航故障:', error);
        }
      });
  }
}

这段代码首先尝试跳转到 /some-route。如果跳转失败，catch 块会被执行。在 catch 块中，我们首先打印错误信息，然后使用 this.$router.isNavigationFailure(error) 来判断这个错误是否是 Vue Router 引起的导航故障。如果是，我们就可以进一步判断故障类型，并采取相应的处理措施。

重要提示： this.$router.isNavigationFailure、this.$router.isNavigationDuplicated 等方法是 Vue Router 提供的一些辅助函数，用于判断错误类型。

全局错误处理程序

Vue 提供了一个全局错误处理程序，你可以使用 Vue.config.errorHandler 来注册一个全局的错误处理函数。这个函数会在任何 Vue 组件抛出错误时被调用，包括导航故障。

// 在你的 main.js 或 app.js 中
import Vue from 'vue';

Vue.config.errorHandler = (err, vm, info) => {
  // 处理错误
  console.error('全局错误处理:', err);
  console.log('组件:', vm);
  console.log('信息:', info);

  if (vm.$router && vm.$router.isNavigationFailure(err)) {
    // 这是一个导航故障
    // 可以根据 err.type 判断具体类型
    switch (err.type) {
      case this.$router.NavigationFailureType.duplicated:
        console.warn('全局捕获：重复导航，忽略');
        break;
      case this.$router.NavigationFailureType.aborted:
        console.warn('全局捕获：导航被中止');
        break;
      case this.$router.NavigationFailureType.cancelled:
        console.warn('全局捕获：导航被取消');
        break;
      case this.$router.NavigationFailureType.rejected:
        console.error('全局捕获：导航被拒绝');
        break;
      default:
        console.error('全局捕获：未知导航故障');
        break;
    }
  }
};

// 启动你的 Vue 应用
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

这个全局错误处理程序会在任何 Vue 组件抛出错误时被调用。我们可以在这个函数中判断错误是否是导航故障，并进行相应的处理。

优点： 全局错误处理程序可以捕获所有 Vue 组件抛出的错误，包括导航故障，这可以帮助你集中管理错误。

缺点： 全局错误处理程序可能会捕获到一些你并不想处理的错误，你需要仔细判断错误类型。

router.onError 钩子

Vue Router 提供了一个 router.onError 钩子，你可以在创建 Router 实例时注册一个错误处理函数。这个函数会在任何路由跳转发生错误时被调用。

// 在你的 router/index.js 中
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // ...你的路由配置
];

const router = new VueRouter({
  routes,
  mode: 'history' // 或 'hash'
});

router.onError((error) => {
  console.error('router.onError 捕获:', error);

  if (router.isNavigationFailure(error)) {
    // 这是一个导航故障
    // 可以根据 error._name 判断具体类型 (注意：这是 Vue Router 内部属性，不推荐直接使用，除非你真的需要)
    if (error.name === 'NavigationDuplicated') {
      console.warn('router.onError: 重复导航，忽略');
    } else if (error.name === 'NavigationAborted') {
      console.warn('router.onError: 导航被中止');
    } else if (error.name === 'NavigationCancelled') {
      console.warn('router.onError: 导航被取消');
    } else if (error.name === 'NavigationRejected') {
        console.error('router.onError: 导航被拒绝');
    }
     else {
      console.error('router.onError: 未知导航故障');
    }
  }
});

export default router;

这个 router.onError 钩子会在任何路由跳转发生错误时被调用。我们可以在这个函数中判断错误是否是导航故障，并进行相应的处理。

优点： router.onError 钩子只处理路由跳转相关的错误，避免了全局错误处理程序可能会捕获到其他类型错误的问题。

缺点： router.onError 钩子只能处理路由跳转相关的错误，无法处理其他 Vue 组件抛出的错误。

第三部分：常见导航故障的应对策略

现在我们已经掌握了捕获导航故障的方法，接下来咱们来针对一些常见的导航故障，制定一些应对策略：

NavigationDuplicated (重复导航)
- 原因： 用户重复点击同一个链接，或者代码中多次调用 router.push 或 router.replace 跳转到同一个路由。
- 解决方案：
- 避免重复点击： 在按钮上添加 loading 状态，防止用户快速重复点击。
- 代码优化： 检查代码中是否有多余的 router.push 或 router.replace 调用。
- 忽略错误： 在 catch 块中，如果判断是 NavigationDuplicated 错误，可以直接忽略它。Vue Router 已经阻止了重复导航，所以不需要做任何额外的处理。

this.$router.push('/some-route')
  .catch(error => {
    if (this.$router.isNavigationDuplicated(error)) {
      // 忽略重复导航错误
      console.warn('重复导航，忽略');
    } else {
      // 处理其他错误
      console.error('导航失败:', error);
    }
  });

NavigationAborted (导航被中止)
- 原因： 在导航守卫中调用了 next(false) 或 next(new Error())。
- 解决方案：
- 检查导航守卫逻辑： 仔细检查你的导航守卫逻辑，确保你在正确的情况下阻止导航。
- 提供友好的提示： 当导航被中止时，可以向用户提供一些友好的提示信息，告诉他们为什么无法跳转。
- 重定向： 可以考虑将用户重定向到另一个合适的页面。

// 在你的导航守卫中
beforeRouteEnter(to, from, next) {
  if (!userIsLoggedIn()) {
    // 用户未登录，阻止导航
    alert('请先登录！'); // 提供提示信息
    next(false);
    // 或者重定向到登录页面
    // next('/login');
  } else {
    next();
  }
}

NavigationCancelled (导航被取消)
- 原因： 有新的导航发起，并且之前的导航还没完成。
- 解决方案：
- 无需特殊处理： 通常情况下，你不需要对 NavigationCancelled 错误进行特殊处理。Vue Router 会自动处理这种情况，并跳转到最新的路由。
- 优化用户体验： 如果你发现 NavigationCancelled 错误频繁发生，可能需要优化你的代码，减少导航的频率。

this.$router.push('/route1')
  .catch(error => {
    if (this.$router.isNavigationCancelled(error)) {
      // 通常不需要处理，Vue Router 会自动处理
      console.warn('导航被取消，忽略');
    } else {
      // 处理其他错误
      console.error('导航失败:', error);
    }
  });

this.$router.push('/route2'); // 这可能会取消之前的导航

NavigationRejected (导航被拒绝)
- 原因： 异步组件加载失败或路由守卫返回一个 rejected 的 Promise。
- 解决方案：
- 检查异步组件： 确保你的异步组件可以正确加载。检查网络连接、服务器状态等。
- 处理 Promise rejection： 在你的路由守卫中，如果返回一个 Promise，确保你正确处理了 Promise 的 rejection。可以使用 try...catch 块或 .catch 方法来捕获错误。
- 提供错误页面： 可以考虑创建一个专门的错误页面，当异步组件加载失败或路由守卫返回 rejected 的 Promise 时，将用户重定向到这个错误页面。

// 异步组件
const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  loading: LoadingComponent, // 加载中显示的组件
  error: ErrorComponent,   // 加载失败显示的组件
  timeout: 3000 // 超时时间
});

// 路由守卫
beforeRouteEnter(to, from, next) {
  someAsyncOperation()
    .then(() => {
      next();
    })
    .catch(error => {
      console.error('路由守卫 Promise rejected:', error);
      // 可以重定向到错误页面
      // next('/error');
      next(new Error('路由守卫 Promise rejected')); // 抛出错误，让全局错误处理程序处理
    });
}

第四部分：最佳实践和注意事项

明确你的目标： 在处理导航故障之前，先明确你的目标。你是想忽略错误、提供提示信息，还是重定向到另一个页面？
区分错误类型： 使用 this.$router.isNavigationFailure、this.$router.isNavigationDuplicated 等方法来区分错误类型，并采取相应的处理措施。
不要过度处理： 有些导航故障（比如 NavigationCancelled）不需要特殊处理，Vue Router 会自动处理。
提供友好的提示： 当导航失败时，尽量向用户提供一些友好的提示信息，帮助他们理解发生了什么。
使用全局错误处理程序： 使用全局错误处理程序可以集中管理错误，方便调试和维护。
考虑用户体验： 始终以用户体验为中心，设计你的错误处理策略。

第五部分：代码示例：一个完整的错误处理流程

下面是一个更完整的代码示例，展示了如何捕获和处理导航故障：

<template>
  <div>
    <button @click="goToRoute('/route1')">Go to Route 1</button>
    <button @click="goToRoute('/route2')">Go to Route 2 (可能会失败)</button>
    <button @click="goToRoute('/route3')">Go to Route 3 (重复导航)</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToRoute(route) {
      this.$router.push(route)
        .then(() => {
          console.log('导航成功:', route);
        })
        .catch(error => {
          console.error('导航失败:', error);

          if (this.$router.isNavigationFailure(error)) {
            if (this.$router.isNavigationDuplicated(error)) {
              console.warn('重复导航，忽略');
            } else if (this.$router.isNavigationAborted(error)) {
              console.warn('导航被中止');
              // 可以显示一个友好的提示信息
              alert('导航被中止，请检查你的权限！');
            } else if (this.$router.isNavigationCancelled(error)) {
              console.warn('导航被取消');
            } else if (this.$router.isNavigationRejected(error)){
                console.error('导航被拒绝');
                alert('导航被拒绝，请稍后再试！');
            }
             else {
              console.error('未知导航故障');
            }
          } else {
            // 其他类型的错误
            console.error('非导航故障:', error);
          }
        });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 模拟一个可能会失败的异步操作
    if (to.path === '/route2') {
      setTimeout(() => {
        // 随机失败
        if (Math.random() < 0.5) {
          next(new Error('模拟异步操作失败'));
        } else {
          next();
        }
      }, 500);
    } else {
      next();
    }
  },
  mounted() {
    // 模拟重复导航
    this.goToRoute('/route3');
    this.goToRoute('/route3');
  }
};
</script>

总结

导航故障是 Vue Router 中不可避免的一部分。理解导航故障的类型，掌握捕获和处理它们的方法，可以帮助你构建更健壮、更友好的 Vue 应用。希望今天的讲座能帮助你在 Vue Router 的世界里少踩一些坑，多一些快乐！

记住，遇到问题不要慌，先看看控制台，再仔细分析错误信息，相信你一定能找到解决方案！

本次讲座到此结束，谢谢大家的观看！

发表回复 取消回复

发表回复取消回复