vue.3路由守卫

所谓路由守卫是指：在跳转路由所执行的操作，它分为三种模式，全局、独享、组件内

1.全局守卫：是指在router中index.js文件所配置的路由都会生效

前置守卫和解析守卫都有三个参数：

• to:去哪里
• from:从哪里来
• next:下一个

而后置守卫只有两个参数。

• to:去哪里
• from:从哪里来

（1）前置守卫beforeEach（）

        全局前置守卫，在初始化时调用：是指监测全部的路由切换之前所执行的函数

（2）解析守卫beforeResolve（）

        这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用

（3）后置守卫beforeEach（）

        全局后置守卫，在初始化时调用：是指监测全部的路由切换之后所执行的函数

2.独享守卫：是指在单个路由配置的时候也可以设置的钩子函数

独享守卫有三个参数。

• to:去哪里
• from:从哪里来
• next下一个

（1）beforeEnter（）和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue'),
    // 独享路由守卫
    beforeEnter:(to,from,next) =>{
      if (localStorage.getItem('data') == 'token') {
        next()
      }else{
        console.log('无权查看');
      }
    }
  }
}

3.组件内守卫是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数

组件内守卫有三个参数。

• to:去哪里
• from:从哪里来
• next下一个

（1） beforeRouteEnter（）通过路由规则，进入该组件被调用

         CSDN字体修改该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined。因为它在组件生命周期beforeCreate阶段触发，此时的新组件还没有被创建。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数

beforeRouteEnter(ton,from,next){
    next（（vm）=>{
        //此时vm 等于this
    }）
} 

（2）在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例

（3） beforeRouteLeave（）通过路由规则，离开该组件被调用，可以访问组件实例this

困惑点。beforeEnter和beforeRouteEnter的区别！

它们俩都是通过路由匹配进行触发，最大区别在书写位置不同。beforeEnter是在路由文件中配置，而beforeRouteEnter是在组件内写，类似于生命周期钩子

—————————————————————————————————————————

                    完整的导航解析过程

1. 触发进入其它路由
2. 调用要离开路由的组件守卫beforeRouteLeave
3.  调用全局的前置守卫beforeEach
4.  在重用的组件里调用 beforeRouteUpdate
5.  在路由配置里调用 beforeEnter
6.  解析异步路由组件
7.  在将要进入的路由组件中调用beforeRouteEnter
8.  调用全局的解析守卫beforeResolve
9.  导航被确认
10.  调用全局的后置钩子afterEach。
11.  触发 DOM 更新mounted。
12.  执行beforeRouteEnter守卫中传给 next的回调函数