vue路由——进阶篇（二）

我们上一篇进阶内容主要讲解了路由中的路由守卫，路由守卫主要分为三种，分别是全局守卫、路由独享的守卫和组件内守卫。那么这一篇我们主要去了解路由的路由员元信息、过渡效果和路由懒加载。

路由元信息

我们将每一个路由对象称之为路由记录。因为路由对象是可以嵌套的，所以路由记录也是可以嵌套的。当一个路由匹配成功之后，可能匹配到多个路由记录。

我们在使用路由的时候，会对每个路由进行配置。在路由构建选线routes中有一个选项meta，也称为元字段。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

一个路由匹配到的所有路由记录都会储存到route对象中的matched数组中，因此我们可以遍历 matched 数组来检查路由记录中的meta字段。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

过渡动效

在切换组件的时候我们可以使用<transition>组件，添加一些过渡效果。

<transition>
  <router-view></router-view>
</transition>

单个路由设置过渡效果

在各个路由组件内使用并设置不同的name属性。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

这种方式设置的过渡动态只有一种过渡方式，我们也可以通过组件的监听属性来切换过渡方式。

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

路由懒加载

路由懒加载其实就是延迟加载路由。因为当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了，而这就加路由懒加载。

结合 Vue 的 异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。而vue 的脚手架已经分别实现了这两项功能，我们只需要将这两项结合起来。

在路由文件 index.js 中，我们通过import Books from '../views/books.vue';导入文件。这种方式无法做到路由懒加载，而我们换一种导入方式，我们将代码做如下修改：

  {
        path: '/books',
        alias: '/boooks',
        component:  () => import ('../views/books.vue'),
        name: 'books',