路由懒加载

路由懒加载也叫延迟加载,因为vue是单页面应用,webpake打包后,文件会很大所以启动的时候打开首页,资源过多可能会出现
白屏的状况,影响用户体验,这时我们就需要用到路由懒加载,这样就可以按需加载页面,提高用户体验

//最流行的写法，es6语法
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      component: ()=>import('@/components/DefaultIndex') ,
      children: [
        {
          path: '',
          component: ()=>import('@/components/Index')
         },
        {
          path: '*',
          redirect: '/Index'
        }
      ]
})

//或者下次这样 AMD规范
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      component: resolve => require(['@/components/DefaultIndex'],resolve),
      children: [
        {
          path: '',
          component: resolve => require(['@/components/Index'],resolve)
        },
        {
          path: '*',
          redirect: '/Index'
        }
      ]
})