当前位置：首页 > VUE

vue怎么实现路由拦截

2026-02-23 00:01:35VUE

Vue 路由拦截的实现方法

在 Vue 中，可以通过 Vue Router 提供的导航守卫（Navigation Guards）功能来实现路由拦截。以下是几种常见的实现方式：

全局前置守卫

使用 router.beforeEach 可以在路由跳转前进行拦截，常用于权限验证或登录状态检查。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

路由独享守卫

可以在路由配置中直接定义 beforeEnter 守卫，只对该路由生效。

vue怎么实现路由拦截

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        if (!isAdmin()) {
          next('/unauthorized')
        } else {
          next()
        }
      }
    }
  ]
})

组件内守卫

在组件内部可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被确认前调用
    // 不能获取组件实例 `this`
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    if (unsavedChanges()) {
      if (confirm('您有未保存的更改，确定要离开吗？')) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

全局解析守卫

router.beforeResolve 在所有组件内守卫和异步路由组件被解析之后调用。

vue怎么实现路由拦截

router.beforeResolve((to, from, next) => {
  // 确保所有异步组件都已加载完成
  next()
})

全局后置钩子

router.afterEach 不会改变导航本身，但可以用于分析或页面标题更改等操作。

router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题'
})

路由元信息

可以通过路由的 meta 字段存储额外信息，用于权限控制。

const router = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

动态添加路由

在某些情况下，可能需要根据用户权限动态添加路由。

// 根据用户角色过滤可用路由
function filterRoutes(routes, role) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return route.meta.roles.includes(role)
    }
    return true
  })
}

// 动态添加路由
router.addRoutes(filterRoutes(asyncRoutes, userRole))