vue-router导航守卫执行顺序

一、测试案例

1.目录结构

2.bottom.vue

<template>
<div>
bottom<br/>
  <button @click="toIndex1()">go to index1</button>
</div>
</template>

<script>
export default {
  name: "bottom",
  methods:{
    toIndex1(){
      this.$router.push('/index/1');
    }
  },
  beforeRouteEnter(to,from,next){
  console.log("beforeRouteEnter=>进入bottom组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
  next();
},
beforeRouteUpdate(to,from,next){
  console.log("beforeRouteUpdate=>更新bottom组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
  next();
},
beforeRouteLeave(to,from,next){
  console.log("beforeRouteLeave=>离开bottom组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
  next();
},
}
</script>

<style scoped>

</style>

3.index.vue

<template>
  <div class="app">
    index{{this.$route.params.id}}<br/>
    <button @click="toId1()">go to Index1</button>
    <button @click="toId2()">go to Index2</button>
    <button @click="toBottom()">go to bottom</button>

  </div>


</template>

<script>

export default {
  name: 'index',
  beforeRouteEnter(to,from,next){
    console.log("beforeRouteEnter=>进入index组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
    next();
  },
  beforeRouteUpdate(to,from,next){
    console.log("beforeRouteUpdate=>更新index组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
    next();
  },
  beforeRouteLeave(to,from,next){
    console.log("beforeRouteLeave=>离开index组件,来自："+from.meta.ComponentName+"\t去往："+to.meta.ComponentName);
    next();
  },
  data() {
    return {
      mathScore: 80,
      englishScore: 60,
    }
  },
  methods:{
    toBottom(){
      this.$router.push('/bottom');
    },
    toId1(){
      this.$router.push('/index/1');
    },
    toId2(){
      this.$router.push('/index/2');
    }
  }

}


</script>


<style scoped>

</style>

4.route.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router)

import Index from "../components/index"
import Bottom from '../components/bottom/bottom'
import App from "../App";

let router = new Router({
  // 声明路由的匹配规则
  routes: [
    {
      path: '/',
      component: Index,
      meta: {
        ComponentName: "index",
        keepAlive: true
      },
      beforeEnter(to,from,next){
        console.log("nowRouter...index")
        console.log("beforeEnter=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)
        next();
      }
    },
    {
      path: '/index/:id',
      component: Index,
      meta:{
        ComponentName: "index",
        keepAlive: true
      },
      beforeEnter(to,from,next){
        console.log("nowRouter...index")
        console.log("beforeEnter=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)
        next();
      }},


    {
      path:'/bottom',
      component: Bottom,
      meta:{
        ComponentName: "bottom",
        keepAlive: true
      },
      beforeEnter(to,from,next){
        console.log("nowRouter...bottom")
        console.log("beforeEnter=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)
        next();
      }}

  ],
})



router.beforeEach((to,from,next)=>{
      console.log("beforeEach=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)
      next();
})


router.beforeResolve((to, from, next) => {
  console.log("beforeResolve=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)
  next();
})

router.afterEach((to, from) => {
  console.log("afterEach=>from:"+from.meta.ComponentName+"\tto:"+to.meta.ComponentName)

})
export default router

5.App.vue

<template>
  <div id="app">
        <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import index from './components'

export default {
  name: 'App',
  components: {
    index
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6.main.js

import Vue from 'vue'
import App from './App'
import router from './router/router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';



Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、结果

1.项目刚启动，首次进入首页/index,

（1.首先执行 全局前置守卫（前置路由为null，前往路由/index） =>
（2.接着执行 路由独享守卫(执行的是要前往的路由/index的路由独享守卫) =>
（3.接着执行 组件内的守卫（beforeRouteEnter，此时index组件还未渲染） =>
（4.接着执行 全局解析守卫 （beforeResolve,在导航被确认之前，在所有组件内守卫 和 异步路由组件 被解析之后）=>
（5.最后执行 全局后置钩子（afterEach）

2.在首页/index点击路由跳转到/index/1页面

（1.首先执行 组件内守卫（beforeRouteLeave,要离开的index组件的守卫）=>
（2.然后执行 全局前置守卫（前置路由为/index，前往路由/index/1）=>
（3.接着执行 路由独享守卫（执行的是要前往的路由/index/1的路由独享守卫）=>
（4.然后执行 组件内守卫（beforeRouteEnter，此时不属于index组件复用，路由不同，一个是/index，一个是/index：id）=>
（5.接着执行 全局解析守卫 （beforeResolve,在导航被确认之前，在所有组件内守卫 和 异步路由组件 被解析之后）=>
（6.最后执行 全局后置钩子（afterEach）

3.在/index/1点击路由跳转到/index/2页面

（1.首先执行 全局前置守卫（前置路由为/index/1，前往路由/index/2）=>
（2.然后执行 组件内守卫（beforeRouteUpdate，因为组件index复用，两个都是同一个路由是/index：id）=>
（3.接着执行 全局解析守卫 （beforeResolve,在导航被确认之前，在所有组件内守卫 和 异步路由组件 被解析之后）=>
（4.最后执行 全局后置钩子（afterEach）

4.在/index/2点击路由跳转到/bottom页面

（1.首先执行 组件内守卫（beforeRouteLeave,要离开的index组件的守卫）=>
（2.然后执行 全局前置守卫（前置路由为/index/2，前往路由/bottom）=>
（3.接着执行 路由独享守卫（执行的是要前往的路由/bottom的路由独享守卫）=>
（4.然后执行 组件内守卫（beforeRouteEnter，此时不属于index组件复用）=>
（5.接着执行 全局解析守卫 （beforeResolve,在导航被确认之前，在所有组件内守卫 和 异步路由组件 被解析之后）=>
（6.最后执行 全局后置钩子（afterEach）

三、结论