一、什么是导航守卫？

VueRouter提供的导航守卫主要用于在导航的过程中重定向或取消路由、或者添加权限验证、数据获取等业务逻辑。

导航守卫分为三类：全局守卫、路由独享守卫和组件内守卫。可以用于路由导航过程中的不同阶段。

每一个导航守卫都有三个参数：to、from和next。

to：表示即将进入的目标路由对象

from：当前导航正要离开的路由对象

next：函数，以下是next的常用方法

next(): 进行管道中的下一个钩子

next(false): 中断当前导航

next( ./xx ): 中断当前导航，并跳转至设置好的路径

二、导航守卫讲解

1.全局前置导航守卫

当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫前置导航守卫，所以它是跳转前触发的。任何路由跳转都会触发

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

使用场景：

我们一般在制作权限管理，登录验证时会使用它

2.全局后置导航守卫

后置导航守卫，然而和前置导航守卫不同的是，这个钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
})

使用场景：

我们一般在进行页面跳转后，对页面进行操作时使用它

3. 路由独享守卫

路由独享守卫  独享守卫就是单独给某个页面加上的路由守卫(注意路由独享守卫，只有前置守卫，没有后置守卫的)

const router = new VueRouter({
  routes: [
    {
      path: '/Home',
      name: 'Home',
      component: Home, 
      meta: {
        title: ''
      },
       beforeEnter:(to,from,next)=>{
       }
    },
  ]
})

总结

以上就是今天分享的内容，本文仅仅简单介绍了导航守卫的使用，导航守卫给我们提供了许多便利，在页面跳转前进行操作，跳转后进行初始化等等的操作