Vue-router进阶篇-CSDN博客

前言

上一篇我们学习了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;
  }
复制代码

这样我们就简单实现了一个隐出隐现的效果。