beforeRouteEnter是Vue Router组件内守卫，执行时组件实例未创建，故不可访问this，仅能通过next(vm => {})回调获取实例；常用于登录校验等前置逻辑。
beforeRouteEnter 是 Vue Router 提供的组件内守卫，专用于在进入该组件对应的路由前执行逻辑。它最大的特点是：组件实例尚未创建，因此不能访问 this。
为什么只能在 beforeRouteEnter 里用 next(vm => {})？
因为这个钩子在组件挂载前触发，此时 Vue 实例还没生成。但你可以通过 next 的回调参数拿到即将创建的组件实例：
-
next()直接放行，不操作实例 -
next(vm => { /* 可安全使用 vm */ })在组件渲染后立即执行，vm就是当前组件实例，等效于this - 如果需要在回调中访问 data 或调用 methods，必须走这个回调形式
典型用法：登录权限拦截
比如用户中心页 /user 需校验登录态：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
export default {
name: 'UserProfile',
beforeRouteEnter(to, from, next) {
const token = localStorage.getItem('auth_token')
if (token) {
next() // 允许进入
} else {
next({ path: '/login', query: { redirect: to.fullPath } })
}
}
}注意：to.fullPath 会保留原路径，登录成功后可跳回。
立即学习“前端免费学习笔记（深入）”；
常见误区和注意事项
- 不能在
beforeRouteEnter中直接写this.xxx，会报undefined - 若需在进入后立刻更新视图（如设置标题、请求数据），应放在
next(vm => { vm.fetchData() })里 - 不要在多个分支中重复调用
next，否则会报错或导航异常（例如 if/else 里都写了next()） - 它不响应 query 或 hash 变化——参数不变时刷新 URL 不会再次触发
对比其他组件守卫
beforeRouteUpdate 和 beforeRouteLeave 都能访问 this，因为它们发生在组件已存在之后：
-
beforeRouteUpdate：适用于动态路由复用场景（如/post/1 → /post/2） -
beforeRouteLeave：适合退出前确认（如表单未保存提示） - 三者都接收
(to, from, next)参数，但执行时机和上下文不同
