解释 Vue Router 源码中 `beforeRouteUpdate` 和 `beforeRouteLeave` 钩子的执行时机和作用。

各位靓仔靓女们，晚上好！我是你们的老朋友，今天咱们不聊八卦，只聊技术，来一场深入 Vue Router 源码的探险之旅！今天的主题是：beforeRouteUpdate 和 beforeRouteLeave 这俩兄弟的秘密。

开场白：路由界的守门员

在 Vue Router 的世界里，路由跳转就像一场说走就走的旅行，而 beforeRouteUpdate 和 beforeRouteLeave 这两个钩子，就像是旅行前的安检员和离开酒店前的退房手续，确保一切顺利进行。它们都是组件内的导航守卫，专门用于处理组件实例内部的路由变化。

一、beforeRouteUpdate：参数不变，组件更新

想象一下，你正在浏览一个用户详情页，路由是 /user/:id。现在，你在同一个页面上，点击了另一个用户的头像，id 参数变了，但是组件实例 并没有 被销毁和重新创建。这就是 beforeRouteUpdate 钩子的用武之地。

1.1 执行时机

beforeRouteUpdate 钩子在以下情况下执行：

• 当前路由改变，但复用了现有组件。 具体来说，就是路由匹配到了同一个组件，只是路由参数 (params)、查询参数 (query) 或哈希 (hash) 发生了变化。

1.2 作用

• 数据更新： 当路由参数改变时，你需要更新组件的数据。比如，根据新的 id 重新获取用户信息。
• 状态管理： 你可能需要在路由更新时重置一些组件内部的状态。
• 阻止导航： 如果某些条件不满足，你可以阻止路由更新。

1.3 源码揭秘（简化版）

虽然我们不能直接看到 Vue Router 源码的完整实现，但我们可以模拟一下它的核心逻辑。假设我们有一个简化的路由匹配器和导航流程：

// 简化版的路由匹配器
function matchRoute(route, path) {
  // 假设 route.path 是 '/user/:id'，path 是 '/user/123'
  const routePathParts = route.path.split('/');
  const pathParts = path.split('/');

  if (routePathParts.length !== pathParts.length) {
    return null; // 不匹配
  }

  const params = {};
  for (let i = 0; i < routePathParts.length; i++) {
    if (routePathParts[i].startsWith(':')) {
      const paramName = routePathParts[i].slice(1); // 去掉 ':'
      params[paramName] = pathParts[i];
    } else if (routePathParts[i] !== pathParts[i]) {
      return null; // 不匹配
    }
  }

  return {
    route: route,
    params: params
  };
}

// 简化版的导航
function navigate(to) {
  const matchedRoute = matchRoute({ path: '/user/:id', component: UserDetail }, to);

  if (matchedRoute) {
    // 1. 检查当前组件是否已经存在
    if (currentComponent === UserDetail) {
      // 2. 触发 beforeRouteUpdate 钩子
      currentComponent.beforeRouteUpdate(matchedRoute.route, currentRoute, (next) => {
        if (next === false) {
          // 阻止导航
          console.log('Navigation aborted by beforeRouteUpdate');
          return;
        }

        // 3. 更新组件数据 (模拟)
        currentComponent.userId = matchedRoute.params.id;
        currentComponent.fetchData(matchedRoute.params.id);
        console.log('UserDetail component updated with id:', matchedRoute.params.id);

        // 4. 更新 currentRoute (模拟)
        currentRoute = matchedRoute.route;
      });
    } else {
      // 正常渲染新组件 (略)
      console.log('Rendering new UserDetail component');
      currentComponent = UserDetail;
      currentComponent.userId = matchedRoute.params.id;
      currentComponent.fetchData(matchedRoute.params.id);
      currentRoute = matchedRoute.route;
    }
  } else {
    console.log('Route not found');
  }
}

// 模拟 UserDetail 组件
const UserDetail = {
  template: '<div>User ID: {{ userId }}</div>',
  data() {
    return {
      userId: null,
      userData: null
    };
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate called');
    // 模拟异步操作
    setTimeout(() => {
      if (this.userData && this.userData.isAdmin) {
        next(); // 允许导航
      } else {
        console.log("User is not admin, cannot update");
        next(false); // 阻止导航
      }
    }, 50);
  },
  fetchData(id) {
    // 模拟获取用户数据
    console.log(`Fetching user data for id: ${id}`);
    setTimeout(() => {
      this.userData = { id: id, name: 'User ' + id, isAdmin: id % 2 === 0 };
    }, 50);
  }
};

// 模拟全局变量
let currentComponent = null;
let currentRoute = null;

// 模拟导航
navigate('/user/123'); // 第一次导航
setTimeout(() => {
  navigate('/user/456'); // 更新路由参数
}, 100);

在这个例子中：

• matchRoute 函数模拟了路由匹配的过程。
• navigate 函数模拟了导航的过程，当路由匹配到已存在的组件时，会触发 beforeRouteUpdate 钩子。
• UserDetail 组件定义了 beforeRouteUpdate 钩子，用于在路由更新时更新组件的数据。

1.4 使用案例

<template>
  <div>
    <h1>用户详情</h1>
    <p>ID: {{ userId }}</p>
    <p>姓名: {{ userName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      userName: null
    };
  },
  watch: {
    '$route': {
      handler: 'fetchData',
      immediate: true
    }
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate called');
    // 在路由更新前执行
    // 可以进行一些验证或数据准备
    next(); // 必须调用 next()
  },
  methods: {
    async fetchData() {
      this.userId = this.$route.params.id;
      try {
        const response = await fetch(`/api/users/${this.userId}`);
        const data = await response.json();
        this.userName = data.name;
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    }
  },
  beforeDestroy() {
    console.log('Component destroyed!');
  }
};
</script>

在这个例子中，我们使用了 watch 监听 $route 的变化来更新数据，这是一个常用的方法。同时，我们也可以使用 beforeRouteUpdate 钩子来进行一些额外的处理，比如验证用户权限或者记录日志。

二、beforeRouteLeave：挥手告别，再见江湖

当你准备离开一个路由，跳转到另一个路由时，beforeRouteLeave 钩子就会被触发。它就像是离开酒店前的退房手续，确保你已经保存了所有未保存的更改，并且可以安全地离开。

2.1 执行时机

beforeRouteLeave 钩子在以下情况下执行：

• 组件对应的路由将被导航离开。 也就是说，用户即将离开当前组件所在的页面。

2.2 作用

• 保存未保存的更改： 比如，如果用户正在编辑一个表单，你需要提示用户保存更改。
• 取消未完成的请求： 如果组件正在进行一些异步请求，你需要取消这些请求，避免内存泄漏。
• 确认离开： 你可以弹出一个确认对话框，询问用户是否真的要离开。
• 清理工作： 释放资源，重置状态等。

2.3 源码揭秘（简化版）

// 简化版的导航 (续)
function navigate(to) {
  const matchedRoute = matchRoute({ path: '/user/:id', component: UserDetail }, to);
  const matchedRoute2 = matchRoute({ path: '/home', component: Home }, to);

  if (currentComponent) {
    // 1. 触发 beforeRouteLeave 钩子
    currentComponent.beforeRouteLeave(matchedRoute.route, currentRoute, (next) => {
      if (next === false) {
        // 阻止导航
        console.log('Navigation aborted by beforeRouteLeave');
        return;
      }

      // 2. 执行离开后的清理工作 (模拟)
      console.log('Leaving UserDetail component');
      // currentComponent = null; // 销毁组件 (简化)
    });
  }

  if (matchedRoute) {
    if (currentComponent === UserDetail) {
      currentComponent.beforeRouteUpdate(matchedRoute.route, currentRoute, (next) => {
        if (next === false) {
          // 阻止导航
          console.log('Navigation aborted by beforeRouteUpdate');
          return;
        }

        // 3. 更新组件数据 (模拟)
        currentComponent.userId = matchedRoute.params.id;
        currentComponent.fetchData(matchedRoute.params.id);
        console.log('UserDetail component updated with id:', matchedRoute.params.id);
        currentRoute = matchedRoute.route;
      });
    } else {
      console.log('Rendering new UserDetail component');
      currentComponent = UserDetail;
      currentComponent.userId = matchedRoute.params.id;
      currentComponent.fetchData(matchedRoute.params.id);
      currentRoute = matchedRoute.route;
    }
  } else if (matchedRoute2) {
    console.log('Rendering new Home component');
    currentComponent = Home;
    currentRoute = matchedRoute2.route;
  }
  else {
    console.log('Route not found');
  }
}

// 模拟 Home 组件
const Home = {
  template: '<div>Home Page</div>',
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave called on Home');
    next();
  }
};

// 模拟 UserDetail 组件 （添加 beforeRouteLeave）
const UserDetail = {
  template: '<div>User ID: {{ userId }}</div>',
  data() {
    return {
      userId: null,
      userData: null,
      isDirty: false // 模拟表单是否已修改
    };
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate called');
    setTimeout(() => {
      if (this.userData && this.userData.isAdmin) {
        next(); // 允许导航
      } else {
        console.log("User is not admin, cannot update");
        next(false); // 阻止导航
      }
    }, 50);
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave called on UserDetail');
    if (this.isDirty) {
      const confirmLeave = confirm('您有未保存的更改，确定要离开吗？');
      if (confirmLeave) {
        next(); // 允许导航
      } else {
        next(false); // 阻止导航
      }
    } else {
      next(); // 允许导航
    }
  },
  fetchData(id) {
    console.log(`Fetching user data for id: ${id}`);
    setTimeout(() => {
      this.userData = { id: id, name: 'User ' + id, isAdmin: id % 2 === 0 };
    }, 50);
  }
};

// 模拟全局变量
let currentComponent = null;
let currentRoute = null;

// 模拟导航
navigate('/user/123'); // 第一次导航
setTimeout(() => {
  navigate('/home');
}, 100);

在这个例子中：

• beforeRouteLeave 钩子被添加到 UserDetail 组件中，用于在离开页面前提示用户保存更改。
• isDirty 变量模拟了表单是否已修改的状态。

2.4 使用案例

<template>
  <div>
    <h1>编辑文章</h1>
    <textarea v-model="content"></textarea>
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      isDirty: false
    };
  },
  watch: {
    content() {
      this.isDirty = true;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      const confirmLeave = confirm('您有未保存的更改，确定要离开吗？');
      if (confirmLeave) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  methods: {
    save() {
      // 保存文章
      this.isDirty = false;
    }
  }
};
</script>

在这个例子中，我们使用了 beforeRouteLeave 钩子来提示用户保存未保存的更改。如果用户确认离开，我们允许导航；否则，我们阻止导航。

三、参数传递

beforeRouteUpdate 和 beforeRouteLeave 钩子都接收三个参数：

参数	类型	描述
to	Route	即将要进入的目标 路由对象。
from	Route	当前导航正要离开的路由对象。
next	Function	调用 next() 则允许导航，next(false) 则阻止导航。你也可以传递一个路由对象给 next()，例如 next('/home')，这样会中断当前的导航，跳转到指定的路由。

四、注意事项

• 必须调用 next()： 无论你是否要阻止导航，都必须调用 next() 函数。如果不调用，导航将永远停留在当前页面。
• 异步操作： 钩子函数内部可以进行异步操作，但是必须在异步操作完成后调用 next()。
• this 上下文： 在钩子函数内部，this 指向当前组件实例。
• beforeRouteEnter： 还有一个 beforeRouteEnter 钩子，它在组件创建 之前 执行，因此无法访问 this。它主要用于获取路由参数或者执行一些全局性的操作。

五、总结

钩子	执行时机	作用
beforeRouteUpdate	当前路由改变，但复用了现有组件。	更新组件数据，状态管理，阻止导航。
beforeRouteLeave	组件对应的路由即将被导航离开。	保存未保存的更改，取消未完成的请求，确认离开，清理工作。

beforeRouteUpdate 和 beforeRouteLeave 就像是路由界的左右护法，确保你的 Vue 应用在路由跳转的过程中能够平稳运行。掌握了它们，你就可以更加灵活地控制路由的行为，提升用户体验。

六、实战演练

假设我们有一个电商网站，用户在商品详情页点击“加入购物车”按钮后，需要提示用户是否登录。如果用户未登录，需要跳转到登录页面，登录成功后返回商品详情页。

// 商品详情页组件
<template>
  <div>
    <h1>商品详情</h1>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // 保存当前路由，以便登录成功后返回
    localStorage.setItem('redirect', this.$route.fullPath);
    next();
  },
  methods: {
    addToCart() {
      if (!this.isLoggedIn()) {
        // 跳转到登录页面
        this.$router.push('/login');
      } else {
        // 加入购物车
        console.log('加入购物车');
      }
    },
    isLoggedIn() {
      // 模拟登录状态
      return localStorage.getItem('token');
    }
  }
};
</script>

// 登录页组件
<template>
  <div>
    <h1>登录</h1>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // 模拟登录
      localStorage.setItem('token', '123');
      // 获取保存的路由
      const redirect = localStorage.getItem('redirect') || '/';
      // 跳转到保存的路由
      this.$router.push(redirect);
    }
  }
};
</script>

在这个例子中，我们使用了 beforeRouteLeave 钩子来保存当前路由，以便登录成功后返回。在登录页组件中，我们获取保存的路由，并使用 this.$router.push() 跳转到该路由。

结尾：路由的艺术

路由是前端开发中的重要组成部分，理解 Vue Router 的源码，掌握各种导航守卫的使用，可以让你更好地控制应用的流程，提升用户体验。希望今天的讲解能够帮助你更好地理解 beforeRouteUpdate 和 beforeRouteLeave 这两个钩子，并在实际项目中灵活运用。记住，技术的世界是无限的，探索的脚步永远不能停止！

下次再见！