Vue 路由守卫怎么在组件内使用 beforeRouteEnter 钩子-Vue.js-PHP中文网

beforeRouteEnter是Vue Router组件内守卫，执行时组件实例未创建，故不可访问this，仅能通过next(vm => {})回调获取实例；常用于登录校验等前置逻辑。

vue 路由守卫怎么在组件内使用 beforerouteenter 钩子

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 会保留原路径，登录成功后可跳回。