当前位置：首页 > VUE

vue如何实现路由拦截

2026-02-20 16:21:25VUE

vue 实现路由拦截的方法

Vue 中可以通过路由守卫（Navigation Guards）实现路由拦截，主要分为全局守卫、路由独享守卫和组件内守卫三种方式。

全局前置守卫

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

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

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

路由独享守卫

在路由配置中直接定义 beforeEnter 守卫，仅对当前路由生效。

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

组件内守卫

在组件内部通过 beforeRouteEnter、beforeRouteUpdate 或 beforeRouteLeave 实现拦截。

export default {
  beforeRouteEnter(to, from, next) {
    // 组件实例尚未创建，无法访问 `this`
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    // 离开路由时触发
    const answer = confirm('确定离开吗？')
    if (answer) next()
    else next(false)
  }
}

拦截逻辑常见场景

登录验证

检查用户是否登录，未登录则跳转到登录页。

router.beforeEach((to, from, next) => {
  const isPublic = to.matched.some(record => record.meta.public)
  const loggedIn = localStorage.getItem('user')

  if (!isPublic && !loggedIn) {
    return next('/login')
  }
  next()
})

权限控制

根据用户角色限制访问权限。

router.beforeEach((to, from, next) => {
  const requiredRole = to.meta.role
  const userRole = getUserRole()

  if (requiredRole && userRole !== requiredRole) {
    next('/forbidden')
  } else {
    next()
  }
})

页面离开确认

防止用户误操作导致数据丢失。

beforeRouteLeave(to, from, next) {
  if (this.formChanged) {
    if (confirm('未保存的更改将丢失，确定离开？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}