路由懒加载过程

路由懒加载是由vue的异步组件和webpack的代码分割功能实现的。

vue异步组件：

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
  // resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。
})

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')  
)

路由配置不变：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})