Vue路由守卫 通俗易懂

路由守卫

路由提供了路由守卫,注意是用来跳转或取消当前导航，比如：当前入项目子页面，必须先进行登录全局守卫。

路由守卫又称导航守卫，指是路由跳转前、中、后过程中的一些钩子函数。官方解释是vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。路由守卫分为三种，全局路由、组件内路由，路由独享。

全局守卫

全局前置守卫

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

router.beforeEach((to, from, next) => {
  console.log('前置路由守卫beforeEach')
  next()
})

        to用来获取将要进入的路径

        from用来获取将要离开的路径

        next()用来中断或继续执行导航

        next(false)  表示不能通过

        next（‘/login’）表示跳转到登录页面

        主要点,不写next()默认是通不过的，此时也不能进入页面。

 

全局后置守卫

router.afterEach(to,from)=>{}
// 后置路由守卫
router.afterEach((to, from) => {
  console.log('后置路由守卫affterEach') 
})

区别：没有next函数，也不会改变导航本身

路由独享守卫

定义子router.js中，只限制可跳转路径的组件

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

 beforeEnter: (to, from, next) => {
      console.log('路由独享守卫beforeEnter')
      next()
 }

        to用来获取将要进入的路径

        from用来获取将要离开的路径

        next()用来中断或继续执行导航

组件内守卫

在某个组件内容使用，限制子组件

        beforeRouterEnter(to,from,next)在激活的组件里调用，进入组件之前。没创建在created之前

        beforeRouterUpdate(to,from,next)在组件被改变的时候调用，路由更新但是内容不会改变

        beforeRouterLeave(to,from,next)在失去的组件里调用，离开组件之前，此时进入了组件，但是没离开

执行顺序

 beforeEach--->beforeEnter--->beforeRouterEnter--->beforeResolve--->affterEach

进入前置守卫----->读取路由信息---->进入组件------>进行解析------->进入后置守卫。