Vue Router 中全局后置钩子 (afterEach) 的用法？

推荐答案

在 Vue Router 中，afterEach 是一个全局后置钩子，用于在每次路由导航完成后执行一些操作。它不会接收 next 函数，因为导航已经完成，无法再改变导航的结果。

router.afterEach((to, from) => {
  // 在这里执行一些操作
  console.log('导航完成:', to.path);
});

• to: 即将进入的目标路由对象。
• from: 当前导航正要离开的路由对象。

本题详细解读

1. afterEach 的作用

afterEach 钩子主要用于在路由导航完成后执行一些与路由无关的操作，比如记录日志、页面滚动到顶部、发送分析数据等。由于导航已经完成，afterEach 钩子不会影响导航的结果。

2. 使用场景

• 日志记录：记录用户访问的页面路径。
• 页面滚动：在每次路由切换后，将页面滚动到顶部。
• 分析数据：发送页面访问数据到分析平台。

3. 示例代码

// www.javascriptcn.com code example
router.afterEach((to, from) => {
  // 记录用户访问的页面路径
  console.log(`用户从 ${from.path} 跳转到 ${to.path}`);

  // 页面滚动到顶部
  window.scrollTo(0, 0);

  // 发送分析数据
  sendAnalytics(to.path);
});

4. 注意事项

• afterEach 钩子不会接收 next 函数，因为导航已经完成。
• 如果需要在导航过程中执行一些操作（如权限验证），应使用 beforeEach 钩子。
• afterEach 钩子中的操作应该是轻量级的，避免阻塞页面渲染。