vue-router 鉴权守卫

最新推荐文章于 2025-06-03 08:14:15 发布

原创最新推荐文章于 2025-06-03 08:14:15 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #router #路由 #鉴权

本文详细介绍了Vue.js中的路由守卫，包括全局、组件级和路由独享三种类型的守卫，以及它们的使用方法和参数说明。通过路由守卫，开发者可以实现导航控制，如权限验证、数据预加载等。同时，文中还展示了如何在不同场景下使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等关键钩子函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由导航守卫

导航守卫就是路由跳转过程中的一些钩子函数。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局路由守卫，组件路由守卫，路由独享守卫。

每个守卫方法接受三个参数：

to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：执行下一步（必须要调用该方法）
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link的to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

全局路由守卫

所谓全局路由守卫，在全局中都可以使用。

全局前置守卫beforeEach(to,from,next)，全局后置守卫afterEach(to,from)

 router.beforeEach((to,from,next)=>{

    next()  //决定页面是否继续向下走    next(true);

 });

组件路由守卫

跟methods:{}同级别税额，组件路由守卫是写在每个单独的vue文件里面的路由守卫

beforeRouteEnter (to, from, next)：在路由进入之前，组件实例还未渲染，所以无法获取 this 实例，只能通过 vm 来访问组件实例

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (to, from, next)：同一页面，刷新不同数据时调用

beforeRouteLeave (to, from, next)：离开当前路由页面时调用

路由独享守卫

指在单个路由配置的时候也可以设置的钩子函数

beforeEnter(to,from,next)

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

vue-router 鉴权 守卫

vue-router 鉴权守卫