1、路由守卫的了解
在SPA单页面的应用程序中，网页的标题是通过title标签来显示的，但是在SPA应用中只有一个固定的HTML，因此切换组件，标题不会发生改变，其中，有两种方式可以进行弥补，一是通过原生JS来操作，另一种便是通过路由守卫进行操作了。
2、通过原生JS进行修改
每一个组件都有自己的生命周期，离开的组件会被销毁，进入当前路由的组件，会经历组件的创建与挂载，因此，可以利用生命周期的钩子函数配合document修改title的值
缺点：
1、这样就导致需要在每一个页面组件都需要进行手动修改title的内容
2、如果页面组件过多，在开发和后期维护上都是一个麻烦事
综上所述，我们希望有一个类似axios的拦截器一样的东西，能为我们做个拦截，这个拦截器知道我们的路由跳转是从哪一个组件跳到哪一个组件，因此，这样的话就便于处理标题信息了，这就是全局路由守卫的由来。
3、全局路由守卫
3.1 全局路由守卫的执行原理
路由守卫会在路由跳转的中间添加一层拦截器，Vue-router提供的路由守卫主要用来监听路由的进入和离开，Vue-router提供了beforeEach和afterEach钩子函数，会在路由跳转前和跳转后触发。
3.2 路由守卫的钩子函数
Vue-router提供了两个全局路由守卫，一个是beforeEach全局守卫，也叫前置守卫，另一个叫afterEach全局守卫，也叫后置守卫。路由守卫钩子函数的参数是一个回调函数。
3.2.1 beforeEach全局守卫
beforeEach全局守卫的回调函数接受三个参数为：to，from，next
三个参数说明：
1. to跳转进入的目标路由对象
2. from当前准备离开的路由对象
3. next调用该方法后，进入下一个钩子函数，作用类似于express或者koa中中间件里调用的next
next函数说明：
1. 如果next函数正常调用next()表示正常进入跳转路由，导航状态为确认
2. 如果next函数在调用是传入false，如：next(false)，表示终端导航跳转
3. next函数还可以传参，表示跳转到指令路由next("/")，或next({ path:"/" })参数的路由
3.2.2. afterEach全局路由守卫
afterEach全局守卫的回调函数接受两个参数为 to，from
两个参数说明：
1. to跳转进入的目标路由对象
2. from当前准备离开的路由对象
afterEach没有next()回调函数，因为在afterEach被调用时，路由已经跳转完毕。
3.3 使用全局路由守卫修改标题值
3.3.1 使用全局路由守卫说明：因为全局路由守卫回调函数参数to，from表示的是路由对象，因此如果想在路由对象中获取title值，就必须现在路由映射中定义title值，将title定义在meta元数据对象中，元数据修饰数据的数据，在跳转路由是通过跳转路由获取title值，然后修改标题中的文字。
3.3.2 修改路由添加title
4、路由独享守卫
4.1 路由独享守卫说明
使用的钩子函数与全局路由守卫一致，为beforeEnter，不同的是，路由独享守卫是定义在路由记录中，全局路由守卫是定义在入口文件中，路由独享守卫只在路由进入时有效，全局路由守卫是所有路由跳转都会被拦截。
4.2 案例：只想拦截进入/离开 article 的路由，就可以给/article路由使用路由独享守卫
5、组件内的路由守卫
除了在全局和确定的路由中定义路由导航守卫，还可以在组件中定义路由导航守卫。
5.1 组件内的路由守卫说明
1. 组件内的守卫是定义在组件内部，组件选项对象中的路由守卫
2. 组件内部路由守卫有三个，为：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave
3. beforeRouteEnter组件创建前调用，不能使用组件实例this
4. beforeRouteUpdate路由被改变，但是组件被复用时调用，比如：动态路由
5. beforeRouteLeave导航离开时该组件调用
5.2 案例：在article文章组件中使用组件内的路由守卫
5.3 关于组件内路由守卫的next参数
说明：
1. next是一个函数
2. 因为在beforeRouteEnter路由守卫中不能通过this访问组件实例
3. 因此在beforeRouteEnter守卫中next可以接受一个回调函数，回调函数的形参就是组件实例
4. beforeRouteUpdate和beforeRouteLeave中能通过this获取组件实例，但不支持回调函数。
