Vue 学习随笔系列五 -- 路由守卫 beforeRouteEnter 的使用

<template>
  <div>
    <h1>User Profile</h1>
    <p>这是一个用户的个人资料页面。</p>
  </div>
</template>
 
<script>
export default {
  name: 'UserProfile',
  // 使用 beforeRouteEnter 守卫
  beforeRouteEnter (to, from, next) {
    // 在路由进入之前，我们可以在这里进行一些操作，例如获取用户信息
    // 由于此时组件实例还没被创建，我们无法访问 this
    // 通常我们可以通过传递一个回调给 next 来访问组件实例
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log('UserProfile beforeRouteEnter 守卫被触发。');
      // 假设我们在这里获取用户信息
      // vm.userInfo = ...
    });
  },
  // 其他生命周期钩子或方法...
};
</script>

这个代码示例展示了如何在Vue路由导航守卫中使用beforeRouteEnter。在beforeRouteEnter守卫中，我们不能访问this，因为此时组件实例还没被创建。我们通过传递一个回调给next方法来访问组件实例。在这个回调中，我们可以执行任何需要在路由进入之前完成的操作，例如获取用户信息等。