vue中的7个路由守卫

全局路由守卫-3个

全局守卫是任何路由执行的时候都要执行的守卫

以下三个都有三个参数

1. to: Route: 即将要进入的目标 路由对象
2. from: Route: 当前导航正要离开的路由
3. next: Function: 一定要调用该next方法（相当于放行），否则路由不向下执行。

三者的执行顺序为：

全局前置守卫beforeEach——>全局解析守卫beforeResolve——>全局后置守卫afterEach

beforeEach全局前置守卫

beforeEach 在初始化 和 每次路由每次切换之前执行，【beforeEach和beforeResolve 两者用法差不多，大多用beforeEach】【可以用于登录拦截】

router.beforeEach((to, from, next) => {
    console.log('到哪去to', to);
    console.log('从哪来from', from);
    console.log('beforeEach全局前置守卫');
    next();//一定要加next(),不然没法获取接下来的路由
})

beforeResolve 全局解析守卫

beforeResolve 是在解析页面之前执行【即匹配到了path进而匹配到component之后】

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

afterEach 全局后置守卫

afterEach 初始化的时候调用，路由切换完毕调用【注意，没有next】

可以适用于切换完路由需要更改页面的对于的title的功能实现

router.afterEach((to, from) => {
    console.log('afterEach后置守卫执行了');
})

局部路由守卫/路由独享 beforeEnter -1个

局部路由守卫，只针对某个路由规则生效

它的执行的顺序比beforeEach要晚，但早于beforeResolve， 在解析了路由表，找到了对应的路径，但未进入相应的路由项之前调用

【可以用于部分路由的登录拦截】

{
  path:"/cinema",
  component:Cinema,
  beforeEnter:(to,from,next)=>{//局部路由守卫,只针对某个路由规则生效,参数和全局守卫一致
    next()
  }
},

组件内守卫-3个

它比全局前置要慢，比路由独享要慢，快于全局解析路由守卫

注意： beforeRouteEnter不能获取组件实例 `this`，因为当组件守卫执行前，组件实例还没被创建，但是剩下的两个组件内守卫可以

解决：如果想要在beforeRouteEnter中取到this，可以通过在next函数中传一个回调函数，回调函数的形参就是当前页面的实例，如下

可以在路由组件内直接定义以下组件内守卫

beforeRouteEnter

通过路由规则，进入该组件前被调用 【可以用于权限管理】

<script>
  export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行时，组件实例还没被创建
    
    // 在next函数中可以传一个回调函数,回调函数的形参就是当前页面的实例
    next((instance) => {
      console.log(instance);
    });
  },
  </script>

beforeRouteUpdate

路由更改了，那么就会触发

<script>
  export default {
  beforeRouteUpdate (to, from, next) {
    // 在页面显示时不会触发,在路由改变时会触发
    // 可以访问组件实例 `this`
    next();
  },
}
  </script>

beforeRouteLeave

通过路由规则，离开该组件时调用

<script>
  export default {
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  }
}
  </script>

执行顺序

(组件内守卫：beforeRouteLeave) ——> beforeEach ——> 局部路由守卫:beforeEnter ——> (组件内守卫:beforeRouteEnter，beforeRouteUpdate) ——> beforeResolve ——> afterEach

路由跳转的执行过程

首先根据声明式导航或者编程式导航拿到目标url ——> 去路由表中遍历path找到目标地址 ——> 进而找到对应的component ——> 找到对应的路由组件去解析渲染