有时我们需要在页面发生路由改变时，进行一些操作。比如从一个页面过渡到另一页面时，显示一个全局的 Loading 动画。或者进入某页面时对用户权限进行校验。
一、全局的钩子函数
1，路由改变前的钩子
（1）to：即将要进入的目标路由对象。
（2）frome：当前导航正要离开的路由对象。
（3）next：路由的控制参数，有如下四种调用方式：
next()：如果一切正常，则调用这个方法进入下一个钩子。
next(false)：取消导航（即路由不发生改变）
next('/login')：当前的导航被中断，然后进行一个新的导航（路径可自由指定）。
next(error)：如果一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
// ...
})
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' //引入首页组件
import hello from '@/components/hello' //引入欢迎页组件
//Vue全局使用Router
Vue.use(Router)
const router = new Router({
routes: [ //配置路由，使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index//映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello
}
]
})
//全局路由改变前钩子
router.beforeEach((to, from, next) => {
console.log('即将进入：', to);
console.log('即将离开：', from);
next();
})
export default router（3）beforeEach() 方法还有个常用的地方：验证用户权限。
比如某些页面需要先验证是否登录，如果登录了就可以访问，否则跳转到登录页。这个判断就可以放在 beforeEach() 方法中进行。
//全局路由改变前钩子
router.beforeEach((to, from, next) => {
//这里简单地使用localStorage来判断是否登陆
if(window.localStorage.getItem('token')){
next();
}else{
next('/login');
}
})2，路由改变后的钩子
//全局路由改变后钩子
router.afterEach((to, from) => {
console.log('即将进入：', to);
console.log('即将离开：', from);
})（2）afterEach() 方法有个常用的地方是自动让页面返回最顶端。
比如一个页面较长，滚动到某个位置后跳转。这时另一个页面滚动条默认是上一个页面停留的位置。我们可以在 afterEach() 方法中将滚动条位置进行重置。
//全局路由改变后钩子
router.afterEach((to, from) => {
//将滚动条恢复到最顶端
window.scrollTo(0, 0);
})二、路由配置中的钩子函数
const router = new Router({
routes: [ //配置路由，使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello,
beforeEnter:(to,from,next)=>{
console.log('即将进入：', to);
console.log('即将离开：', from);
next();
}
}
]
})三、组件内的钩子函数
1，钩子函数介绍
在该组件的对应路由被 confirm 前调用。（即路由进入前调用）
由于此时实例还没被创建，所以此时不能获取组件实例（this）。
在当前路由改变，但是该组件被复用时调用。比如：我们在一个带有动态参数的路径 /hello/:id 之间跳转（/hello/1 和 /hello/2），虽然渲染的是同样的 Detail 组件，但这个钩子还是会被调用。
该函数内可以访问获取组件实例（this）。
当导航离开该组件的对应路由时调用。（即路由离开前调用）
该函数内可以访问获取组件实例（this）。
2，使用样例
<template>
<div>
<h1>ID：{{ $route.params.id}}</h1>
<h1>用户名：{{ $route.params.userName}}</h1>
</div>
</template>
<script>
export default {
//路由进入前调用
beforeRouteEnter (to, from, next) {
window.document.title = "欢迎页";
next();
},
}
</script>附：使用 watch 监测路由变化
除了使用钩子函数外，我们也可以使用 watch 来监听 $route 对象，然后根据路由参数的变化来进行响应。
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
</script>
