Vue Router 中组件内的守卫 (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave) 的用法？

推荐答案

在 Vue Router 中，组件内的守卫包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。它们分别用于在路由导航的不同阶段执行特定的逻辑。

beforeRouteEnter

• 用法: 在路由进入组件之前调用。
• 特点: 此时组件实例尚未创建，因此无法访问 this。
• 示例:

  beforeRouteEnter(to, from, next) {
    // 在进入路由之前执行逻辑
    next(vm => {
      // 通过 `vm` 访问组件实例
    });
  }

beforeRouteUpdate

• 用法: 在当前路由改变，但该组件被复用时调用。
• 特点: 可以访问 this，因为组件实例已经存在。
• 示例:

  beforeRouteUpdate(to, from, next) {
    // 在路由更新时执行逻辑
    next();
  }

beforeRouteLeave

• 用法: 在离开当前路由之前调用。
• 特点: 可以访问 this，常用于阻止用户离开当前页面。
• 示例:

  // www.javascriptcn.com code example
  beforeRouteLeave(to, from, next) {
    // 在离开路由之前执行逻辑
    const answer = window.confirm('确定要离开吗？');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }

本题详细解读

beforeRouteEnter

• 适用场景: 当你需要在组件实例创建之前执行一些逻辑时，可以使用 beforeRouteEnter。例如，你可能需要在进入路由之前从服务器获取数据。
• 注意事项: 由于此时组件实例尚未创建，因此无法直接访问 this。但可以通过 next 回调函数中的 vm 参数来访问组件实例。

beforeRouteUpdate

• 适用场景: 当路由参数发生变化，但组件实例被复用时，可以使用 beforeRouteUpdate。例如，当用户从一个用户详情页面导航到另一个用户详情页面时，组件实例会被复用。
• 注意事项: 由于组件实例已经存在，因此可以直接访问 this。

beforeRouteLeave

• 适用场景: 当你需要在用户离开当前路由之前执行一些逻辑时，可以使用 beforeRouteLeave。例如，你可能需要提示用户保存未保存的更改。
• 注意事项: 可以通过 next(false) 来阻止用户离开当前页面。