前言
上一篇我们学习了vue-router的基础，包括基础标签和基础配置，这一篇文章，我们将会来学习路由的几个高级特性。让我们开始吧。
路由守卫
路由守卫是由多个检测函数和钩子函数组成的一连串的自定义逻辑。
全局守卫设置：
- beforeEach (to, from, next) : router.js之中设置的全局拦截守卫，从名字可以看出，每一次路由的变化实际上都会经过一次这个函数内容，to表示的是变化后的路由对象，from表示的是来自于哪一个路由对象内容，next是一个函数内容，可以传递相关的跳转值，或者直接调用，会跳转到指定的目标路径下面。所以我们在是用的时候一定要记得next的调用。
我们来看一段代码：
import Vue from 'vue'
import Router from 'vue-router'
import router from './router'
Vue.use(Router)
const route = new Router({
...router
})
const logging = false;
route.beforeEach((to, from, next) => {
if( to.name !== "logging" ){
if( !logging ) next( { name: 'logging' } )
else next();
}
else {
if( logging ) next( { name: 'home' } )
else next();
}
})
export default route
这是一段设置登陆过滤的代码，只是简单的模拟一下。当没有登陆的时候将会跳转到名称为logging的界面，当登陆了之后如果是需要跳转登陆界面则转换当前跳转路径到home页面，否则则直接跳转。
- afterEach(to, from)：这个方法是在跳转完成之后执行的钩子函数内容，并且所有的路由跳转全部都会调用这一钩子，但是由于是跳转完成之后才触发，所以并不影响跳转结果，因此只有两个参数。
代码伺候：
route.afterEach((to, from) => {
console.log(to);
console.log(from);
console.log(arguments);
console.log("afterEach");
})
- beforeResolve(to, from, next) :全局解析守卫，在所有的组建内守卫和异步守卫执行完毕之后才会执行，但是会在展示页面渲染完成之前执行，所以是可以修改跳转方向的（注意有next函数内容），书写方式类似于beforeEach，这里就不再书写了，可以自己尝试一下。
路由守卫设置：
- beforeEnter(to, from, next)：路由独享守卫，书写在routes属性的数据项对象之中，当跳转到当前路径的时候，会自动的调用这一守卫函数。和beforeEach的区别只是在于，一个是全局的，一个是单个对象的，当然执行顺序也是会有差别，之后会同一说明。
代码伺候:
routes: [
{
path: '/',
name: 'home',
component: Home,
beforeEnter: (to, from, next) => {
console.log('this is beforeEnter');
next();
}
}
]
组件守卫设置：
- beforeRouteEnter(to, from, next):组建内路由守卫函数，编写在组建之中,是专门对于组件逻辑的一道关卡。这一守卫在路由还没有渲染提交前就已经执行，所以我们在这一守卫之中是没有办法调用this变量的，因为这个时候还不存在this变量内容。但是如果实在是需要使用当前的vue实例对象，可以向next方法之中传递一个方法内容。在后面的守卫执行顺序之中我们可以发现，实际上beforeRouteUpdate会在beforeRouteEnter之后才运行，那么为什么服用组件的enter守卫this也不可用呢。个人觉的是为了于激活新组件保持队形。
我们来看一段代码：
beforeRouteEnter(to, from, next){
console.log('this is before route enter');
next(vm => {
console.log(vm); //vm就是当前组件的实例
});
},
-
beforeRouteUpdate(to, from, next):这一守卫是当路由发生变化，组件被复用的时候调用的。所以我们可以知道，首次进入组建的时候是不会调用这一守卫的，只有当复用发生的时候才会调用。同时这一函数之中可以调用this，因为当前组件对象已经被渲染了。
-
beforeRouteLeave(to, from, next):这一守卫会在当前组件即将离开的时候进行调用，我们常常在页面离开的时候获得一些是否要离开当前界面的确认框，就可以通过这一守卫进行实现。同时这一守卫之中也是可以调用this的。
我们综合上面三个守卫来一段代码:
beforeRouteEnter(to, from, next){
console.log('this is before route enter');
next(vm => {
console.log(vm);
});
},
beforeRouteUpdate(to, from, next){
console.log('this is before route update');
next();
},
beforeRouteLeave(to, from, next){
var confirm = confirm("是否离开当前页面?");
if(confirm){
console.log('this is before route Leave');
next();
}
else {
next(false);
}
}
最后我们来总结一下守卫的调用过程吧。
- 路由改变触发。
- 确定离开当前组件时，调用beforeRouteLeave守卫，然后组件失活。
- 如有设置，调用全局的beforeEach守卫。
- 如此处跳转的组件为重用组件则调用重用组件之中的beforeRouteUpdate守卫。
- 针对跳转的路由，调用路由独享的守卫beforeEnter。
- 解析异步路由组件。 （import引入当前展示组件。）
- 在被激活的组件之中调用beforeRouteEnter。（复用组建重新激活，新组件需读取解析）
- 调用全局的解析守卫 beforeResolve。
- 导航被确认。
- 调用全局的钩子函数afterEach。
- 触发dom更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由动态效果
通过使用< transition >标签来进行动效，基础篇我们有说过router-view这个功能标签是可以使用动效标签包裹，并且可以使用keep-alive标签的，这里我们来尝试一个简单的动效吧。 上代码：
html代码:
<transition-group name="change">
<router-view key="default"/>
<router-view key="child2" name="child2"/>
</transition-group>
style代码：
.change-enter{
opacity: 0
}
.change-enter-active{
transition: opacity 1s ease;
}
.change-enter-to{
opacity: 1;
}
.change-leave{
opacity: 1
}
.change-leave-active{
transition: opacity 1s ease;
}
.change-leave-to{
opacity: 0;
}
这样我们就简单实现了一个隐出隐现的效果。
总结
本文主要是说明了路由守卫的功能和使用，同时捎带提及了过度动画内容。路由的全部概念和用法可以说就此全部提及完毕。之后关于vue-router的内容只剩下源码阅读，和一些开发时候的问题总结，我会努力持续更新，希望看官们能满意。有什么错误的地方也请帮忙告知，我也会即使修改过来的。欢迎大家一起学习讨论
