路由钩子主要用来拦截导航，在钩子里可以跳转到指定的页面或取消跳转。
- 路由参数或者查询的改变不会触发导航守卫！。 *可以通过watch观察$route对象来应对这些变化，或用beforeRouteUpdate的组件内守卫。
1. 全局前置守卫
1.1 beforeEach
router.beforeEach((to, from, next) => {
})
当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于* 等待中 *。
每个守卫方法接收三个参数：
to：到哪去（正要进入的路由）；
from: 从哪来（正要离开的路由）；
next: 如果是next()就完成跳转到to指示的路由；如果参数为false则取消此次导航；如果参数是地址或路由对象则调到指定的地址或对象。
确保一定要调用next 方法，否则钩子就不会被resolve。 *
2. 独享路由钩子
2.1 beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
}
}
]
})
3. 组件路由钩子
3.1 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
data () {
return {}
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被确认前调用，不能获取组件示例this，因为当守卫执行前，组件的实例还没被创建。
},
beforeRouteUpdate (to, from, next) {
// 当路由发生改变，但是该组件被复用时调用。也就是路由参数或者查询改变时。
// 举例：对于一个动态参数的路径/foo/:id，当从 /foo/1 跳转到 /foo/2 时被调用。由于会渲染同一个组件，因此组件实例会被复用。所以这个钩子会在这个情况下被调用。
// 可以访问组件this
},
beforeRouteLeave (to, from, next) {
// 离开该组件的对应路由时调用。
// 可以访问组件this
}
- beforeRouteEnter不能访问this，但是可以通过传给next一个回调函数来访问组件实例，在导航被确认的时候会执行回调。并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过vm访问组件实例
})
}
- beforeRouteLeave通常用來禁止用戶在还未保存修改前突然离开。该导航可以通过next(false)来取消跳转。
