Vue-router进阶篇

前言

上一篇咱们学习了vue-router的基础，包括基础标签和基础配置，这一篇文章，咱们将会来学习路由的几个高级特性。让咱们开始吧。

---

路由守卫

路由守卫是由多个检测函数和钩子函数组成的一连串的自定义逻辑。

全局守卫设置：

1. 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页面，不然则直接跳转。

2. afterEach(to, from)：这个方法是在跳转完成以后执行的钩子函数内容，而且全部的路由跳转所有都会调用这一钩子，可是因为是跳转完成以后才触发，因此并不影响跳转结果，所以只有两个参数。

代码伺候：

route.afterEach((to, from) => {
  console.log(to);
  console.log(from);
  console.log(arguments);
  console.log("afterEach");
})
复制代码

3. beforeResolve(to, from, next) :全局解析守卫，在全部的组建内守卫和异步守卫执行完毕以后才会执行，可是会在展现页面渲染完成以前执行，因此是能够修改跳转方向的（注意有next函数内容），书写方式相似于beforeEach，这里就再也不书写了，能够本身尝试一下。

路由守卫设置：

4. beforeEnter(to, from, next)：路由独享守卫，书写在routes属性的数据项对象之中，当跳转到当前路径的时候，会自动的调用这一守卫函数。和beforeEach的区别只是在于，一个是全局的，一个是单个对象的，固然执行顺序也是会有差异，以后会同一说明。

代码伺候:

routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        beforeEnter: (to, from, next) => {
            console.log('this is beforeEnter');
            next();
        }
    }
]
复制代码

组件守卫设置：

5. 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就是当前组件的实例
    });
},
复制代码

6. beforeRouteUpdate(to, from, next):这一守卫是当路由发生变化，组件被复用的时候调用的。因此咱们能够知道，首次进入组建的时候是不会调用这一守卫的，只有当复用发生的时候才会调用。同时这一函数之中能够调用this，由于当前组件对象已经被渲染了。

7. 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);
    }
}
复制代码

最后咱们来总结一下守卫的调用过程吧。

1. 路由改变触发。
2. 肯定离开当前组件时，调用beforeRouteLeave守卫，而后组件失活。
3. 若有设置，调用全局的beforeEach守卫。
4. 如此处跳转的组件为重用组件则调用重用组件之中的beforeRouteUpdate守卫。
5. 针对跳转的路由，调用路由独享的守卫beforeEnter。
6. 解析异步路由组件。 （import引入当前展现组件。）
7. 在被激活的组件之中调用beforeRouteEnter。（复用组建从新激活，新组件需读取解析）
8. 调用全局的解析守卫 beforeResolve。
9. 导航被确认。
10. 调用全局的钩子函数afterEach。
11. 触发dom更新。
12. 用建立好的实例调用 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的内容只剩下源码阅读，和一些开发时候的问题总结，我会努力持续更新，但愿看官们能满意。有什么错误的地方也请帮忙告知，我也会即便修改过来的。欢迎你们一块儿学习讨论