定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
总体来讲vue里面提供了三大类钩子
1、全局钩子
2、单个路由的钩子
3、组件内钩子
1.全局钩子
主要包括beforeEach和afterEach,
beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next: Function
afterEach 钩子没有next 方法，不能改变导航
next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）
next(false) 终止导航。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
2.单个路由里面的钩子函数
顾名思义，它是写在某个路由里头的函数，本质上跟组件内函数没有区别。
主要用于写某个指定路由跳转时需要执行的逻辑
3.路由组件
注意：这里说的是路由组件！
路由组件 属于 组件，但组件 不等同于 路由组件！所谓的路由组件：直接定义在router中component处的组件。如：
在子组件中调用路由的钩子函数时无效的。
在官方文档上是这样定义的：
可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter 不能 访问 this，因为钩子在导航确认前被调用，因此即将登场的新组件还没被创建。
beforeRouteUpdate
beforeRouteLeave
这里简单说下钩子函数的用法：它是和data,methods平级的。
beforeRouteEnter钩子 不能 访问this，因为钩子在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
路由钩子在实际开发中的应用场景
1、清除当前组件中的定时器
当组件中有定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:
beforeRouteLeave (to,from, next) {
window.clearInterval(this.timer)//清除定时器 next()
}
2、当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
beforeRouteLeave (to,from, next) {
//判断是否弹出框的状态和保存信息与否
if(this.dialogVisibility ===true) {
this.dialogVisibility =false//关闭弹出框next(false)//回到当前页面, 阻止页面跳转
}else if(this.saveMessage ===false) {
//弹出警告next(false)//回到当前页面, 阻止页面跳转
}else {
next() //否则允许跳转
}
}
3、保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
beforeRouteLeave (to,from, next) {
localStorage.setItem(name, content); //保存到localStorage中 next()
}
