vue路由守卫

48. vue路由守卫

在Vue中，路由守卫是一种用于控制路由导航的机制。路由守卫可以帮助我们在路由切换的过程中进行一些操作，例如验证用户权限、预处理数据等。

Vue提供了以下路由守卫：

1. beforeEach(to, from, next)：全局前置守卫，当一个路由要进入时，调用此守卫。它接收三个参数：to 表示将要进入的路由，from 表示当前的路由，next 表示路由的控制函数，必须调用next()才能继续导航，或调用next(false)或者next('/path')进行中断或跳转到其他路由。
2. beforeResolve(to, from, next)：全局解析守卫，和全局前置守卫类似，但在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，被调用。
3. afterEach(to, from)：全局后置守卫，在路由切换完成之后被调用，可以用于处理一些页面切换之后的逻辑。
4. beforeEnter(to, from, next)：路由独享的守卫，和全局前置守卫类似，但只作用于当前路由。
5. beforeRouteEnter(to, from, next)：路由进入时守卫，被调用时，组件实例还没有被创建，因此不能访问组件实例的this，但可以通过传递一个回调函数next来访问组件实例。在回调函数中可以访问组件实例，例如：next(vm => vm.myMethod())。
6. beforeRouteUpdate(to, from, next)：路由更新时守卫，被调用时，当前路由与新路由的参数都已经变化，可以在这里对当前组件进行更新。
7. beforeRouteLeave(to, from, next)：路由离开时守卫，被调用时，可以阻止路由离开或者弹出一个确认框等。
   使用路由守卫非常简单，只需要在路由配置中添加相应的守卫函数即可，例如：

   const router = new VueRouter({
        
   routes: [
    {
        
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        
        // 在进入路由前进行一些操作
        // 如果要继续导航，必须调用 next() 函数
        next()
      }
    }
   ]
   })
   

在上面的示例中，我们使用beforeEnter守卫来控制进入/foo路径时进行一些操作，必须调用next()函数才能继续导航。

路由守卫还可以通过全局导航守卫来进行全局控制，例如我们可以通过以下代码来设置全局导航守卫：

const router = new VueRouter({
   
  routes: [...]
})

router.beforeEach((to, from, next) => {
   
  // 在进入每个路由前进行一些操作
  // 如果要继续导航，必须调用 next() 函数
  next()
})

在上面的示例中，我们使用beforeEach守卫来控制进入每个路由时进行一些操作，必须调用next()函数才能继续导航。

除了全局导航守卫，我们还可以为每个组件设置特定的导航守卫。例如，下面的代码演示了如何为组件设置beforeRouteLeave守卫：

const Foo = {
   
  template: `...`,
  beforeRouteLeave(to, from, next) {
   
    // 在离开路由前进行一些操作
    // 如果要离开路由，必须调用 next() 函数
    next()
  }
}

在上面的代码中，我们使用beforeRouteLeave守卫为组件Foo设置离开路由时的操作，必须调用next()函数才能离开路由。

Vue提供了丰富的路由守卫机制，可以帮助我们在路由导航的过程中进行各种操作。需要注意的是，守卫函数中必须调用next()函数来控制路由的导航，否则路由导航将被中断。