Vue Router 导航守卫总结 Better

目录

• 1、什么是导航守卫
• 2、导航守卫的类别
  • 2.1 全局守卫
  • 2.2 局部守卫（组件内的守卫）
  • 2.3 路由独享的守卫
• 3、导航守卫的生命周期与Vue生命周期
  • 全局守卫&&局部守卫的执行顺序
  • 刷新/ 进入当前页面时
  • 修改当前页面路由参数时
  • 离开当前页面时
• 4、详细文档

1、什么是导航守卫

“导航”表示路由正在发生改变。

类似于 Vue 的生命周期钩子函数，在路由发生改变时触发。

2、导航守卫的类别

2.1 全局守卫

全局守卫，在每一次路由改变时都触发。因为是写在 router文件 当中所以没有办法获得 vue 实例。

• 全局前置守卫:

  当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

  简单的说就是：路由进入之前，被调用

• 全局守卫解析守卫:

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

  简单的说就是：路由解析之前，被调用

• 全局后置钩子:

  和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身。

  简单的说就是：路由进入之后，被调用

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

router.beforeResolve((to, from, next) => { // 全局守卫解析守卫
  console.log('beforeResolve', to, from)
  next()
})

router.afterEach((to, from) => { // 全局后置钩子
  console.log('afterEach', to, from)
})

2.2 局部守卫（组件内的守卫）

与生命周期一样，写在组件中。

beforeRouteEnter (to, from, next) {
  // 不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
  console.log('beforeRouteEnter', to, from)
  next()
},
beforeRouteUpdate (to, from, next) {
  console.log('beforeRouteUpdate', to, from)
  next()
},
beforeRouteLeave (to, from, next) {
  console.log('beforeRouteLeave', to, from)
  next()
}

2.3 路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫：

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

3、导航守卫的生命周期与Vue生命周期

• 全局守卫&&局部守卫的执行顺序

beforeRouteLeave 		// --局部， 发生在路由离开之前
router.beforeEach 		// 全局
  beforeRouteEnter 		// --局部，因为在 beforeCreate之前，所以不能获取组件实例 `this`
  beforeRouteUpdate 	// --局部，当前组件路由参数发生变化时执行
router.beforeResolve 	// 全局
router.afterEach 		// 全局

• 刷新/ 进入当前页面时

// ** 刷新当前页面
router.beforeEach 		// 全局
  beforeRouteEnter 		// 局部，因为在 beforeCreate之前，所以不能获取组件实例 `this`
router.beforeResolve 	// 全局
router.afterEach 		// 全局

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

• 修改当前页面路由参数时

beforeCreate
created
beforeMount
mounted

// ** 修改路由参数
router.beforeEach 		// 全局
  beforeRouteUpdate 	// 局部，当前组件路由参数发生变化时执行
router.beforeResolve 	// 全局
router.afterEach 		// 全局

• 离开当前页面时

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

// ** 离开当前页面
  beforeRouteLeave 		// 局部， 发生在路由离开之前
router.beforeEach 		// 全局
router.beforeResolve 	// 全局
router.afterEach 		// 全局

beforeDestroy
destroyed

4、详细文档

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#导航守卫