这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战

VueRouter_导航守卫

导航：路由正在发生变化。

导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫被分成三种：全局的、单个路由独享的、组件内的。

全局守卫

是指路由实例上直接操作的钩子函数，触发路由就会触发这些钩子函数。

vue-router全局有三个守卫

router.beforeEach ：全局前置守卫，进入路由之前
router.beforeResolve ：全局解析守卫，在beforeRouteEnter调用之后调用（不常用）
router.afterEach ：全局后置钩子，进入路由之后

全局前置守卫 beforeEach

在路由跳转前触发，一般被用于登录验证。

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

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

参数说明：

to 目标路由对象
from 即将要离开的路由对象
next 三个参数中最重要的参数。
- 必须调用next()，才能继续往下执行一个钩子，否则路由跳转会停止
- 若要中断当前的导航，可以调用next(false)。
- 可以使用next跳转到一个不同的地址。终端当前导航，进入一个新的导航。next参数值和$routet.push一致。
- next(error)。2.4+，如果传入的参数是一个Error实例，则导航会被终止，且该错误会被传递给router.onError() 注册过的回调。

全局解析守卫 beforeResolve

和boforeEach类似，路由跳转前触发。

和beforeEach的区别：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

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

router.beforeResolve((to, from, next) => {
   // ... 
})

全局后置钩子 afterEach

和beforeEach相反，路由跳转完成后触发。

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

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

路由独享守卫

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

beforeEnter

和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行。

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

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤

【快速入门Vue系列】第三十四篇：全局守卫和路由独享守卫（导航守卫篇）