共计 2595 个字符，预计需要花费 7 分钟才能阅读完成。
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.