路由导航守卫
1、为什么使用导航守卫？
我们来考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？
网页标题是通过<title>来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题并不会改变。
但是我们可以通过JavaScript来修改<title>的内容：window.document.title = '新的标题'。
那么在Vue项目中，在哪里修改? 什么时候修改比较合适呢？
2、普通的修改方式：
我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中。
通过created或mounted生命周期函数，执行对应的代码进行修改即可。
但是当页面比较多时，这种方式不容易维护(因为需要在多个页面执行类似的代码)。
有没有更好的办法呢？
使用导航守卫即可。
3、什么是导航守卫？
vue-router提供的导航守卫主要用来监听路由的进入和离开的；
vue-router提供了beforeEach和afterEach钩子函数，它们会在路由即将改变前和改变后触发。
说明：钩子函数（hook），可以理解为回调函数的意思。
我们可以利用beforeEach来完成标题的修改：
首先，我们可以在钩子当中定义一些标题，可以利用meta来定义（meta指元属性，元数据，定义数据的数据）；
其次，利用导航守卫，修改我们的标题。
说明：导航钩子的三个参数解析：
to：即将要进入的目标的路由对象；
from：当前导航即将要离开的路由对象；
next：调用该方法后，才能进入下一个钩子。
但是注意，如果是嵌套路由的切换跳转，meta为空，会出现无法获取title的情况：
我们可以打印to来观察一下：
所以使用matched，就能确保不会为空：
4、导航守卫补充
补充一：如果是后置钩子，也就是afterEach，不需要主动调用next()函数；
补充二：上面我们使用的导航守卫，被称之为全局守卫。
守卫还有其他两种类型：
路由独享的守卫；
组件内的守卫。
可以查看官网进行学习：