vue-router 路由生命周期（路由守卫）
1.全局&路由 使用
- beforeEach((to,from,next)=>{…})
发生路由 跳转时 立即执行
router.beforeEach((to,from,next)=>{
console.log('跳转到',to);
console.log('来源',from);
console.log('全局前置路由守卫：beforeEach--next需要调用');
next();
})
可以在此处拦截 路由跳转，比如满足某些条件 才能正常跳转，否则就重定向到别的路由(eg:用户登陆功能)。
参数：
(1).to from 都是 路由对象 Route
(2).next是一个函数,该函数的使用方法
** next(): 无参数直接执行，表示进入下一个 生命周期，如果所有的 钩子函数都执行完了(生命周期/守卫)，则导航状态就是confirmed(确认的)
** next(false): 中断当前导航，重置到 from 路由对应的地址。
** next(’/xx’) or next({path:’/xxx’}): 中断当前的导航， 进行一个新的导航，跳转到一个指定的 地址。可传参数 与 route.push方法一致
** next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调
-
beforeReslove((to,from,next)=>{…})
与beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。即在 beforeEach 和 组件内beforeRouteEnter 之后 -
afterEach(()=>{…})
全局后置钩子，在所有路由跳转完成的时候调用，不接受next函数等参数，不能改变导航。 -
beforeEnter 与beforeEach用法相同
2.组件内 路由守卫
- beforeRouteEnter
beforeRouteEnter(to,from,next){
//此处 不能 访问 vue 实例 this=== undefined 因为此时 vue实例还未被创建 该方法 比beforeCreate 先执行
console.log('这是 beforeRouteEnter 路由守卫 方法');
next(); //进入下一个钩子函数
}
- beforeRouteUpdate
当发生路由跳转，且实现了组件复用时执行。例如一个根据路由参数决定渲染内容的功能—商品详情页面。/details/1 变成 /details/2
beforeRouteUpdate(to,from,next){
//可以访问 vue 实例
console.log('路由由',from);
console.log('更新为',to);
console.log('这是 beforeRouteUpdate 路由守卫方法');
next();
}
- beforeRouteLeave
离开当前路由 跳转 时 调用
beforeRouteLeave(to,from,next){
//可以访问 vue 实例
console.log('离开路由',from);
console.log('去往路由',to);
console.log('这是 beforeRouteLeave 路由守卫方法');
next()
}
与Vue 实例 生命周期（钩子函数）执行顺序比较
(离开组件的)beforeRouteLeave >>> beforeEach(全局路由) > >>(跳转到的路由组件内的) beforeRouteEnter >>> afterEach(全局路由) >>> vue实例的生命周期
