一.进入一个页面路由所执行的钩子

代码：

路由的配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '首页',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/shouye.vue'),
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫beforeEnter')
      next()
    },
    children: [
      {
        path: '1/:id?',
        component: a,
        meta: {
          toLogin: true
        },
        xxx: false
      },
      {
        path: '/2/:id?', // ?代表参数值可传可不传，不写?一定要传
        component: aa,
        meta: {
          toLogin: true
        }
      },
      {
        path: '3',
        name: 'a3',
        component: a3
      },
      {
        path: 'f',
        name: 'af',
        component: af
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 全局的前置守卫
router.beforeEach((to, from, next) => {
  console.log('前置路由守卫beforeEach')
  next()
})
// 后置路由守卫
router.afterEach((to, from, next) => {
  console.log('后置路由守卫affterEach')
  next()
})
// 全局的解析守卫
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫beforeResolve')
  next()
})

export default router

a页面的配置

<template>
  <div class="">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <sideBar />
        </el-aside>
        <el-main>
          <!-- 二级路的出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import sideBar from '@/views/sideBar/index.vue'
export default {
  components: {
    sideBar
  },
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },
  name: '',
  methods: {}
}
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

beforeEach------------------->beforeEnter------------->beforeRouterEnter------------->beforeResolve-------->affterEach

进入前置守卫--------------->读取路由信息-------------->进入组件---------------->进行解析------------>

进入后置守卫。

viwe图：