解释 Vue Router 源码中 `beforeRouteUpdate` 和 `beforeRouteLeave` 钩子的执行时机和作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，大家好！今天咱们聊聊 Vue Router 里两个相当有意思的家伙：beforeRouteUpdate 和 beforeRouteLeave。别看名字长，其实它们的功能挺实在的，而且在某些场景下，能帮你解决大问题。来，咱们一点点剖析，保证大家听完能理解透彻，下次面试的时候也能侃侃而谈。

开场白：路由守卫大家族

在深入 beforeRouteUpdate 和 beforeRouteLeave 之前，咱们先简单回顾一下 Vue Router 的路由守卫体系。你可以把它们想象成路由的“保安”，负责在路由切换的不同阶段执行一些检查或者操作。

Vue Router 提供了一系列路由守卫，大致可以分为三类：

全局守卫： 这些守卫会影响应用中的所有路由。
路由独享守卫： 这些守卫只对特定的路由起作用。
组件内的守卫： 这就是我们今天要聊的 beforeRouteUpdate 和 beforeRouteLeave，它们定义在组件内部，所以只对当前组件的路由变化起作用。

主角登场：beforeRouteUpdate 和 beforeRouteLeave

现在，咱们聚焦到今天的主角：

beforeRouteUpdate(to, from, next)： 当组件对应的路由被更新，但该组件仍然被复用时，这个守卫会被调用。什么意思呢？简单来说，就是你在同一个组件内，仅仅是路由参数发生了变化（比如从 /user/1 切换到 /user/2），组件不会被销毁重建，而是会复用，这时候 beforeRouteUpdate 就派上用场了。
beforeRouteLeave(to, from, next)： 当离开该组件对应的路由时，这个守卫会被调用。你可以把它理解成组件的“离职手续办理处”，在离开之前，你可以做一些确认、保存数据或者取消订阅等操作。

执行时机：时间就是金钱，掌握好才能事半功倍

理解这两个守卫的关键，是搞清楚它们的执行时机。

守卫	执行时机
`beforeRouteUpdate`	1. 组件已经被复用。 2. 新的路由参数已经生效（可以通过 `this.$route` 访问）。
`beforeRouteLeave`	1. 即将离开当前组件对应的路由。

beforeRouteUpdate 详解：解决参数变化带来的问题

想象一下，你正在开发一个用户详情页面。路由是 /user/:id，组件是 UserDetail。用户点击列表中的不同用户，路由参数 id 会发生变化。如果没有 beforeRouteUpdate，你可能会在 mounted 钩子里获取用户信息，但是当 id 变化时，mounted 不会再次执行，页面内容也就不会更新。

这时候，beforeRouteUpdate 就成了救星。

<template>
  <div>
    <h1>User Detail</h1>
    <p>ID: {{ userId }}</p>
    <p>Name: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      userName: null,
    };
  },
  watch: {
    '$route'(to, from){
      console.log('route changed, but component reuse!')
    }
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate called!');
    this.userId = to.params.id;
    this.fetchUserData(to.params.id);
    next();
  },
  mounted() {
    console.log('mounted called!');
    this.userId = this.$route.params.id;
    this.fetchUserData(this.$route.params.id);
  },
  methods: {
    async fetchUserData(id) {
      // 模拟异步获取用户数据
      await new Promise(resolve => setTimeout(resolve, 500));
      this.userName = `User ${id}`;
    },
  },
};
</script>

在这个例子中：

beforeRouteUpdate 会在路由参数 id 变化时被调用。
它会更新 userId，并调用 fetchUserData 重新获取用户信息。
next() 必须调用，才能允许路由继续进行。

如果你不调用 next()，路由就卡在那里了，用户会一脸懵逼。

beforeRouteLeave 详解：优雅地告别

beforeRouteLeave 的作用是在离开组件之前执行一些操作。这在很多场景下都很有用：

防止用户意外离开： 比如，用户正在编辑一个表单，但是还没有保存。你可以用 beforeRouteLeave 弹出一个确认框，询问用户是否要放弃更改。

<template>
  <div>
    <textarea v-model="draft"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draft: '',
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.draft && !confirm('Are you sure you want to leave without saving?')) {
      next(false); // 阻止离开
    } else {
      next(); // 允许离开
    }
  },
};
</script>

保存数据： 在离开页面之前，你可以将用户输入的数据保存到本地存储或者发送到服务器。

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
  beforeRouteLeave(to, from, next) {
    localStorage.setItem('userName', this.name);
    next();
  },
};
</script>

取消订阅： 如果你在组件中订阅了一些事件或者使用了 WebSocket 连接，那么在离开组件之前，应该取消订阅或者关闭连接，防止内存泄漏。

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://example.com');
  },
  beforeDestroy() {
    // 组件销毁时关闭连接
    if (this.socket) {
      this.socket.close();
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.socket) {
      this.socket.close(); // 确保在离开路由时关闭连接
    }
    next();
  },
};
</script>

next() 的重要性：控制路由的走向

无论是 beforeRouteUpdate 还是 beforeRouteLeave，next() 都是一个非常重要的参数。它可以控制路由的走向：

next()： 允许路由继续进行。
next(false)： 阻止路由进行。路由会停留在当前页面。
next(path)： 重定向到另一个路由。path 可以是一个字符串路径，也可以是一个描述地址的对象，用法和 <router-link to="..."> 的 to 属性一样。
next(error)： 如果 next 接收到一个 Error 实例，那么导航会被中止，且该错误会被传递给 router.onError() 注册过的回调。

一个更复杂的例子：结合 beforeRouteUpdate 和 beforeRouteLeave

现在，咱们来看一个更复杂的例子，结合了 beforeRouteUpdate 和 beforeRouteLeave。假设我们有一个文章编辑页面，路由是 /article/:id/edit。我们需要实现以下功能：

当路由参数 id 变化时，重新加载文章内容。
当用户离开页面时，如果文章内容有修改，提示用户保存。

<template>
  <div>
    <h1>Edit Article</h1>
    <textarea v-model="content"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleId: null,
      content: '',
      originalContent: '', // 用于比较是否修改
    };
  },
  watch: {
    '$route'(to, from){
      console.log('route changed, but component reuse!')
    }
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate called!');
    this.articleId = to.params.id;
    this.loadArticle(to.params.id);
    next();
  },
  mounted() {
    console.log('mounted called!');
    this.articleId = this.$route.params.id;
    this.loadArticle(this.$route.params.id);
  },
  beforeRouteLeave(to, from, next) {
    if (this.content !== this.originalContent && !confirm('Are you sure you want to leave without saving?')) {
      next(false);
    } else {
      next();
    }
  },
  methods: {
    async loadArticle(id) {
      // 模拟异步加载文章内容
      await new Promise(resolve => setTimeout(resolve, 500));
      this.content = `Article ${id} content`;
      this.originalContent = this.content;
    },
  },
};
</script>

在这个例子中：

beforeRouteUpdate 用于在路由参数 id 变化时重新加载文章内容。
beforeRouteLeave 用于在离开页面时检查文章内容是否修改，并提示用户保存。

注意事项：一些小技巧和潜在的坑

next() 必须调用： 记住，无论 beforeRouteUpdate 还是 beforeRouteLeave，都必须调用 next()，否则路由会卡住。
异步操作： 如果你在守卫中执行异步操作，一定要确保在异步操作完成后再调用 next()。
避免死循环： 如果你在 beforeRouteUpdate 或 beforeRouteLeave 中使用 next(path) 进行重定向，一定要小心，避免造成死循环。
this 上下文： 在组件内的守卫中，this 指向的是 Vue 组件实例，你可以访问组件的 data、methods 等。
取消订阅的最佳位置：虽然beforeRouteLeave可以取消订阅，但通常在beforeDestroy生命周期钩子中取消订阅是更可靠的选择。因为beforeDestroy保证在组件被销毁之前执行，无论是因为路由离开还是其他原因。

总结：理解本质，灵活运用

beforeRouteUpdate 和 beforeRouteLeave 是 Vue Router 提供的两个非常实用的路由守卫。它们可以让你在组件内部更精细地控制路由的走向，解决参数变化和离开页面时可能遇到的问题。

理解了它们的执行时机、作用和 next() 的用法，你就可以在实际开发中灵活运用它们，提升用户体验，避免潜在的 bug。

今天的讲座就到这里，希望大家有所收获！下次再见！

发表回复 取消回复

发表回复取消回复