组件内守卫 beforeRouteEnter 拿不到 this 怎么办？教你正确的取值技巧-Vue.js-PHP中文网

beforeRouteEnter 中无法访问 this 是设计机制而非 bug；可通过 next(vm => {...}) 安全获取实例，或直接使用 to 对象读取路由信息，Vue 3 推荐使用 onBeforeRouteEnter。

组件内守卫 beforerouteenter 拿不到 this 怎么办？教你正确的取值技巧

在 beforeRouteEnter 中确实拿不到 this，因为此时组件实例还没创建。这不是 bug，而是 Vue Router 的设计机制——这个守卫在组件实例化之前执行，所以无法访问实例属性、方法或响应式数据。

虽然不能直接用 this，但 Vue Router 提供了安全的替代方式：把组件实例作为 next 的回调参数传入。只要不立即调用 next()，而是传一个函数，该函数会在组件渲染后、mounted 之前执行，此时实例已存在：

写法示例：
<script></script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // ✅ 这里 vm 就是组件实例
      console.log(vm.$route); // 可取路由信息
      vm.loadData(); // 可调用 methods 里的方法
    });
  }
};
注意：这个回调只在进入时触发一次，且不能访问 data 初始化前的响应式状态（比如 vm.xxx 是 undefined），建议优先操作 props、$route、$router 或调用方法触发后续逻辑。

很多场景其实不需要等组件实例，直接从 to 对象就能拿到关键数据：

例如：

if (!to.meta.public && !store.getters.isAuthenticated) {<br>
  next('/login?redirect=' + to.fullPath);<br>
  return;<br>
}

如果你用的是 Vue 3，推荐迁移到 onBeforeRouteEnter（需配合 defineComponent 和 setup）：

它接收 to、from 和 next，同样不提供 this，但你可以用 next(() => {...}) 安全访问 setup 中定义的响应式变量和函数
更自然地与 ref、computed、useRouter 配合，避免 this 上下文问题

示例：

onBeforeRouteEnter((to, from, next) => {<br>
  next(() => {<br>
    fetchData(); // setup 内定义的函数<br>
  });<br>
});