1.导航守卫
草图。。。导航守卫就像是学校门口的保安。模仿从家到学校的过程，如果有学生证那么就能进入学校；如果没有学生证或失落等能够办理学生证再进入学校；如果没有还不办理，那就拜拜：
所以导航守卫有点像是一个拦截器，如果符合条件则跳转，如果不符合条件则勾销。
1.1 全局守卫
1.1.1 beforeEach
router.js：
import Vue from "vue"import VueRouter from "vue-router"import Home from "../components/home.vue"Vue.use(VueRouter)const router = new VueRouter({ mode: 'history', routes: [ { path: '/', components: { default: Home, haveName: () => import("../components/haveName.vue"), }, }, { path: '/new', component: () => import("../components/new.vue"), }, ],})router.beforeEach((to, from, next) => { console.log(to) console.log(from) next()})export default router看看成果：
to：你上哪儿？from：你从哪儿来？那么next()是干什么的？简略来说就是管制跳转和勾销的，如果执行next()则可能跳转，执行next(false)则不能跳转。
守卫还可能管制点击后跳转到指定的门路，举个例子：
router.beforeEach((to, from, next) => { if (to.path == '/article') { next('/new') alert("我应该是'/article'") } else { next() }})看看成果：
1.1.2 beforeResolve
根本同上，区别在于执行工夫稍晚：
1.1.3 afterEach
1.2 路由独享守卫
再来个草图。。。区别于全局守卫，路由独享守卫是指，只有在跳转到规定的门路时才会呈现守卫：
它只有一个钩子函数，beforeEnter：
举个例子：
{ path: '/about', component: () => import("../components/about.vue"), beforeEnter: (to, from, next) => { console.log(to) console.log(from) next() },},成果：
router.js中只为/about增加了守卫，所以在切换路由的时候只有进入/about时才会触发守卫。
1.3 组件内守卫
区别于全局守卫和路由独享守卫，组件守卫的意思是，组件在哪个门路下，那么这个门路就被守卫了。
1.3.1 beforeRouteEnter
上例子：
hot.vue：
<template> <div class="hot"> 近期热门 </div></template><script>export default { beforeRouteEnter (to, from, next) { console.log(to) console.log(from) next() }}</script>app.vue：
<div class="container"> <router-view /> <router-view name="haveName" /> <router-view name="hot" /></div>router.js：
{ path: '/', components: { default: Home, haveName: () => import("../components/haveName.vue"), hot: () => import("../components/hot.vue"), },},看看成果：
因为根门路/和/hot两个门路都应用了hot.vue这个组件，所以只有在路由切换到这两个门路的时候才会触发组件内守卫。
1.3.2 beforeRouteUpdate
举个例子（动静路由间相互切换）：
news.vue：
beforeRouteUpdate (to, from, next) { console.log(to) console.log(from) console.log('beforeRouteUpdate') next()}成果：
1.3.3 beforeRouteLeave
1.4 守卫优先级
图例解释，进入商场时首先要通过商场门卫，门卫放行后能力进入商店，而进入商店时也可能会有商店保安，保安容许进入后能力进入商店。套用到路由守卫中，全局守卫最先执行，而后是路由独享守卫或组件内守卫。
1.5 应用场景
全局守卫个别用于登录验证，罕用beforeEach；
路由独享守卫，某个门路须要被守卫时应用；
组件内守卫，罕用beforeRouteLeave，用作退出询问。例如来到某个门路时，弹窗，您真的要狠心来到吗？狠心来到。。。有画面了吧。
1.6 解析流程
2.路由元信息
上例子：
router.js：
{ path: '/about', component: () => import("../components/about.vue"), meta: { info1: 1, info2: true, info3: "对于。。。", }},about.vue：
<template> <div class="about"> 对于 </div></template><script>export default { mounted () { console.log(this.$route.meta) }}</script>后果：
好的，这就是路由元信息，就是这么简略。。。那么它能做什么，请看下一章VueRouter（六），联合守卫做的小demo。
题外话
之前的文章中始终没有贴源码地址。主页有我的github地址，源码都在外面，VueRouter篇的所有代码都在vue-test-code这个我的项目下，切换分支即可拿到想要的代码。因为刚开始写文章，有些篇章的确内容太多了，而且构造也不清晰，甚至还有些凌乱。之后的文章会尽量拆分的简短简洁一些。VueRouter这一部分马上就完结了，将来的文章以及源码都会做的更加清晰，如果文章或源码中存在问题请慷慨留言！
Keep foolish,keep hungry.