1、什么是导航守卫：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
这是官方给的解释，也没总结出一个准确的定义，我自己的使用理解就是在路由跳转之前或者之后会触发的一个vue-router内置的函数，在这个函数里我们一般可以拿到两个参数：
（1）from：从哪个路由跳转的，起始路由；
（2）to：跳到哪一个路由，目标路由；
这样我们就可以在被触发的函数中做一些事情了；
2、全局前置导航守卫的一个需求：一个单页面Vue项目，项目有一百个页面，现在要给这个一百个页面添加不同的title属性；
/* 分析：一百个页面，怎么加？如果是一个个的HTML文件，我们还可以一个一个改HTML文件的title；
这个时候我们就可以使用全局前置导航守卫来实现这个功能
*/
//（1）全局前置导航守卫是添加到vue-router对象身上的：
router.beforeEach((to, from, next)=>{
console.log('当前路由:', from)
console.log('目标路由', to)
next(); // next方法必须要手动调用，只有我们调用了路由才会跳转
})
// 每个守卫方法接收三个参数：
// to: 即将要进入的目标
// from: 当前导航正要离开的路由
// next: 一定要调用该方法来 **resolve** 这个钩子。执行效果依赖 `next` 方法的调用参数。
//（2）目标路由to是一个对象，这个对象身上有很多属性：
{
fullPath: "/member"
hash: ""
matched: [{…}]
meta: {}
name: undefined
params: {}
path: "/member"
query: {}
__proto__: Object
}
// 其中这个meta属性是我们在配置路由规则的时候可以配置的一个属性：
{
path: '/member',
component: MemberContainer,
meta:{
title:"会员中心"
}
},
// 这时这个meta属性的值就不再是空对象了，而是：meta: {title: "会员中心"}，
// 我们就可以设置页面的title属性了；
router.beforeEach((to, from, next)=>{
next();
console.log('当前路由:', from, '目标路由', to)
document.title = to.meta.title
})
/*
这个钩子函数会在路由跳转之前触发，并将这个项目的HTML文件中的title属性改成目标路由中配置的
meta属性的值，项目只有一个HTML文件，这时所有的路由的title属性都是相同的，只不过我们设置的
title是我们想让目标路由显示的罢了；
*/
// （2）起始路由to也是一个对象：
{
fullPath: "/home"
hash: ""
matched: [{…}]
meta: {}
name: undefined
params: {}
path: "/home"
query: {}
redirectedFrom: "/"
}
// 3、当我们使用的是嵌套路由的时候这个时候如果直接使用meta属性就会有问题，因此我们项目中使用
// 的应该是matched属性中的meta属性
matched: {
[
beforeEnter: undefined
components: {default: {…}}
instances: {default: undefined}
matchAs: undefined
meta: "首页"
name: undefined
parent: undefined
path: "/home"
props: {}
redirect: undefined
regex: /^\/home(?:\/(?=$))?$/i
__proto__: Object
]
}
router.beforeEach((to, from, next)=>{
next();
console.log('当前路由:', from, '目标路由', to)
document.title = to.mached[0].meta.title
})
2、全局后置钩子函数 afterEach()
router.afterEach((to, from) => {
console.log('触发了后置钩子', to, from);
})
/*
1、这个函数调用的时机：这个函数会在路由已经跳转后触发的，但是还没有到达目标路由，
只是路由已经被resolve了；
2、全局后置钩子函数，接收两个参数：to，from，意义和全局前置守卫相同；
*/
