Vue路由守卫

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 >>

什么是路由守卫

主要通过跳转或取消的方式守卫导航，在路由跳转过程中有很多过程，类似于vue的生命周期，在每一个周期都有一个函数与之对应，在不同时期调用相对应的函数进行操作就是路由守卫。

路由守卫和生命周期的顺序

• 路由前守卫：beforeEach
• 路由守卫：beforeEnter
• 组件路由守卫：beforeRouterEnter
• 全局解析守卫：beforeResolve
• 全局后置守卫：afterEach
• beforeCreate
• created
• beforeMount
• mounted
• 组件路由守卫的next回调

路由导航的参数

• to：目标路由对象
• from：离开路由对象
• next：回调函数
  • 用到next的钩子函数必须用next()结束当前函数才能进入下一个钩子
  • next()可以传参数，类似router.push，当前导航中断后跳转到另一个导航
  • next(vm=>{})中可以获取到当前组件实例，在路由守卫和生命周期之后被调用

路由守卫包含什么

• 全局路由守卫（beforeEach、beforeResolve、afterEach）：路由实力上直接操作的钩子函数，只要出发路由就会触发这些函数

  • beforeEach：路由前守卫在路由还没跳转时提前通知，主要用于登录验证
  • beforeResolve：全局解析守卫在 beforeEach和组件内beforeRouteEnter之后、afterEach之前调用
  • afterEach：路由后守卫在路由跳转完成后触发，参数包括to,from没有next，发生在beforeEach和beforeResolve之后

const router = new VueRouter({...})
                              
router.beforeEach((to,from,next)=> {
  ...
})

• 单个路由守卫（beforeRouterEnter）：某个路由单独享有的函数，同beforeEach，在他之后执行

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

• 组件内路由守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在组件内执行的钩子函数

<template>
	...
</template>
<script>
  export default{
    beforeRouteEnter(to,from,next){
      //不能获取组件实例this
      next(vm=>{
        //可以获取组件实例this，相当于在mounted后被回调
      })
    },
    beforeRouteUpdate(to,from,next){
      //路由在当前组件内改变
    },
    beforeRouteLeave(to,from,next){
      //导航离开当前路由时调用
      //能获取组件实例this
    }
  }
</script>