路由导航守卫

小蓝 • 2024-12-16 13:35 • 编程

一、认识路由导航守卫

路由导航守卫是Vue Router提供的一种机制，用于控制路由跳转的行为，类似于前端的权限控制。通过使用路由导航守卫，我们可以在路由切换时对访问用户进行控制，比如需要用户登陆后才能访问某些页面，或是在用户需要离开当前页面之前进行一些提醒等。

Vue Router提供了三种路由导航守卫：全局守卫、路由独享守卫和组件内的守卫。其中全局守卫会在每个路由跳转时都会执行，而路由独享守卫和组件内的守卫只在特定的路由跳转情况下才会执行。

二、全局守卫

全局守卫是在路由跳转前、路由跳转时和路由跳转后都可以进行一些处理，使用全局守卫需要在Vue Router实例中使用beforeEach、beforeResolve和afterEach方法，这些方法都需要传递一个回调函数作为参数。

1、beforeEach

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

router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。next()、next('/login') ...
})

beforeEach方法在路由即将跳转的情况下会被执行，to和from参数分别表示即将进入的目标路由和当前路由，next方法必须被调用以决定路由是否可以跳转。next方法可以传递一个参数，参数为新的路由路径，用于重定向到新的路由路径。

2、beforeResolve

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

router.beforeResolve((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 进入跳转路由
})

beforeResolve方法在路由确认跳转之前被触发，它和beforeEach方法的区别是beforeResolve方法会等待所有异步钩子执行完毕，确保在路由跳转前所有异步数据都已经加载完毕。

3、afterEach

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

router.afterEach((to, from) => {
  // to: Route: 进入目标路由对象
  // from: Route: 离开的路由对象
})

afterEach方法在路由跳转完成后被触发，可以用于做一些页面跳转后的统计分析等操作。

三、路由独享守卫

路由独享守卫是在配置路由时添加守卫，用于在某些路由跳转时进行特定的处理。

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

在配置路由时，可以使用beforeEnter方法添加路由独享守卫，它和全局守卫的beforeEach方法类似，但只会在当前路由跳转时进行处理。

四、组件内的守卫

在Vue组件内可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave钩子函数来设置路由守卫。

1、beforeRouteEnter

export default {
  beforeRouteEnter(to, from, next) {
    // ...
  }
}

beforeRouteEnter方法在进入当前组件的路由跳转时被调用，但实例尚未被创建。

注意：在beforeRouteEnter守卫中不能使用this，因为它执行时组件实例还没有被创建。

2、beforeRouteUpdate

export default {
  beforeRouteUpdate(to, from, next) {
    // ...
  }
}

beforeRouteUpdate方法在当前组件已经被复用时（例如相同路径之间的路由跳转），对路由参数的变化进行处理。

3、beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // ...
  }
}

beforeRouteLeave方法在离开当前路由时被调用，可以用于在离开前进行确认提示等操作。

结语

路由导航守卫是Vue Router提供的一种强大的功能，可以对路由跳转进行全面的控制和自定义操作。无论是全局守卫，还是路由独享守卫和组件内的守卫，都可以根据不同的需求进行灵活配置，为前端开发提供更多的选择和功能。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270052.html