路由守卫路由钩子生命周期

• 路由钩子分为三种

• 全局钩子： beforeEach、 afterEach、beforeResolve
  单个路由里面的钩子：  beforeEnter(to,from,next)类似全局钩子,但是单独配置
  组件路由：beforeRouteEnter(进入前钩子)、 beforeRouteUpdate(不离开当前路由,改变组件内数据后)、 beforeRouteLeave(离开钩子)

• beforeEach（to，from， next） 前置守卫
• beforeResolve（to，from， next） 解析守卫
• afterEach（to，from）后置守卫

简单的来说就是路由与路由之间切换跳转的关系. 

to:意思是要去的地方

from:意思是从什么地方来.

next:开启允许通过.一般next()这样书写可以添加对应的路由名跳转对应的路由next('/')

<template>
  ...
</template>
<script>
export default{
    data() {
    return {
      test: '工资'
    }
  },
  beforeRouteEnter (to, from, next) {
    // 不能获取组件实例 this
    // 因为当守卫执行前，组件实例还没被创建
    // 不能直接拿到this.但是可以通过下面方法拿到该组件的实例
    next((vm) => {
      console.log(vm)
    // 打印的结果里就有test工资了.
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
    // 但是拿不到更新完毕以后的数据.只能拿到更新之前的数据.但是可以通过$nextTick方法
        this.$nextTick(() => {
      console.log(123)
    })
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例this
  }
}
</script>
<style>
  ...
</style>

// 进入路由时   执行规则

// 前置守卫beforeEach  去的路由本身触发独享守卫beforeEnter  进入前beforeRouteEnter  解析守卫beforeResolve 后置守卫afterEach

// 更新路由时   执行规则

// 前置守卫beforeEach   更新路由后beforeRouteUpdate 后置守卫afterEach