Vue：二级路由，导航守卫（导航钩子）

 二级路由，导航守卫（导航钩子）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    // 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/About.vue'),
    children: [{
        path: "/about/",
        name: "about1",
        component: () => import("../views/About1.vue")
      },
      {
        path: "/about/about2",
        name: "about2",
        component: () => import("../views/About2.vue"),
        // 路由独享的守卫
        // 用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。
        beforeEnter: (to, from, next) => {
          console.log("想要进到about2页面啊");
          next();
        }
      }
    ]
  },
  {
    path: "/setting",
    name: "setting",
    component: () => import("../views/Setting.vue")
  }
]

const router = new VueRouter({
  routes
})

export default router


// Vue 路由 导航守卫（导航钩子）(全局守卫、路由独享守卫、组件内守卫)
// 全局守卫：直接挂载在router实例上
router.beforeEach(function (to, from, next) {
  // 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。
  console.log(to);
  console.log(from);
  next();
})
router.beforeResolve(function (to, from, next) {
  next();
})

// 全局后置钩子
router.afterEach(function (route) {
  console.log(route);
})

组件内的守卫（导航守卫）：

<template>
  <div class="setting">
    <h1>This is a setting page</h1>
    <p>{{test}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  // 组件内的守卫
  beforeRouteEnter (to, from, next) {
    console.log("想要进到setting页面了");
    next(vm=>{
      console.log(vm);
      vm.test = "修改后的数据";
    });
  },
  beforeRouteLeave (to, from, next) {
    console.log("从setting页面离开了");
  }
}
</script>