vue中的路由守卫总结

一、路由守卫分类

1. 全局守卫
2. 路由独享守卫
3. 组件内守卫

其中，全局守卫中可分为全局前置守卫和全局后置守卫。

二、路由守卫用法

首先介绍一下导航钩子三个参数的含义：

• to：即将要进入的目标路由对象，也就是新路由。
• from：当前导航即将要离开的路由对象，也就是旧路由。
• next：调用该方法后，才能进入下一个钩子函数。

其中

next() 表示直接进to所指路由
next(false) 表示中断当前路由
next(‘route’) 表示跳转指定路由
next(‘error’) 表示跳转错误路由

a. 全局前置守卫(beforeEach)

router.beforeEach((to, from, next) => {
      console.log(to, from, next, 'beforeEach----')
      next()
}

b. 全局后置守卫(afterEach)

router.afterEach((to, from) => {
        console.log(to, from, 'afterEach----')
      })

c. 路由独享守卫(beforeEnter)

let routes = [ {
      path: '/b',
      component: myB,
      beforeEnter: (to, from, next) => {
         console.log(to, from, next, 'beforeEnter...')
         next()
       }
    }]

路由独享守卫可以在路由配置时直接定义beforeEnter。

d. 组件内守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

let myA = {
      template: `
      <div>myA组件</div>
      `,
      beforeRouteEnter(to, from, next) {
        // this-->window 
        console.log(this, 'beforeRouteEnter')
        next()
      },
      beforeRouteUpdate(to, from, next) {
        // this-->vue实例
        console.log(this, 'beforeRouteUpdate')
        next()
      },
      beforeRouteLeave(to, from, next) {
        // this-->vue实例
        console.log(this, 'beforeRouteLeave')
        next()
      }
    }

beforeRouteLeave离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

*注意：若参数中包含next参数，则调用next()