vue-router里面提供的功能点除了路由懒加载是须要使用的，其他功能可以当作一个参考，如页面过渡，记住滚动条位置等。

页面过渡

  先讲页面过渡，关于页面过渡，也就是所谓的切换路由时候的动画效果，我们一般可以借助一些插件实现，如element-ui中就提供了相关的功能，当然vue-router也提供了类似的功能，毕竟是管理路由切换的，所以照顾到切换时候的动画也是正常的。<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：如淡出淡入效果。

<template>
  <div id="app">
    <transition name='fade' mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  body{
    margin:0
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

  注意，你光写一个name='fade'是不会有fade效果的，这里没有默认的可选项，动画都要你自己定义，具体可以去vue的官网了解一下组件过渡动画这一块，其实我也不熟。还有一个要注意的点就是，路由切换的时候一定要用mode='out-in'，由于动画执行的时候默认是同时的，也就是说你A页面淡出的时候B页面同时在淡入，这会造成很多不可预知的问题，自己试试就知道了，加个'out-in'意思很明确，A页面先淡出，B页面才能淡入，相当于给这两个异步操作分了个先后。

记住滚动条

  顾名思义，这个功能是用来记录上一页或者下一页的滚动条的位置的，一般讲一个东西的时候我都喜欢把最蛋疼的东西先拿出来讲，这个也是，千万千万千万要注意

  这个功能只在支持 history.pushState 的浏览器中可用。（听不懂！）

  这个功能只有通过浏览器的 前进/后退 按钮触发时才可用。（好理解了）

  当然你可以用router.go(1)前一页 / router.go(-1) 上一页 去触发这个功能。

  如果你用router.push('./index')这种的去跳转页面，他并记不住滚动条的位置，这个时候你可能得依靠localhost做点什么了。

  ok，可以说一下用法了。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
  }
})

 scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 只有在我刚才说的情况下才有值。

路由懒加载

  当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

  听起来很牛逼的样子。做个实验吧。

  我在两个页面的script标签里都打印了一句话

<template>
  <div class="body">我是页面1
    <button @click = "$router.push('/vueRouterPlay2')">跳到页面2</button>
  </div>
</template>

<script>
console.log('我是页面1，我在script标签里面写了一句话')
export default {

}
</script>

<style lang="less" scoped>

</style>

<template>
  <div class="body">我是页面2
    <button @click = "$router.push('/vueRouterPlay1')">跳到页面1</button>
  </div>
</template>

<script>
console.log('我是页面2，我在script标签里面写了一句话')
export default {

}
</script>

<style lang="less" scoped>

</style>

然后我们打开页面1

竟然发现两句话都输出了，打开页面2也是同样的情况，简直不能忍。

来试试路由懒加载能否解决这个问题。

// 探究一下vue-router
// import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
// import vueRouterPlay2 from '@/page/vueRouterPlay/vueRouterPlay2.vue'
//路由懒加载
const vueRouterPlay1 = () => import('@/page/vueRouterPlay/vueRouterPlay1.vue')
const vueRouterPlay2 = () => import('@/page/vueRouterPlay/vueRouterPlay2.vue')

打开页面1，结果正常了。 

vue-router的入门就到这一章结束，基本就是一些有用的功能罗列和使用。

关于代码的三层，使用层，原理层和源码层，vue-router到使用层感觉就差不多了，vuex也基本如此。

vue-router结束后会开D3的第二阶段，d3的echarts化，有兴趣的可以关注后续的内容。