vue 的路由懒加载与组件懒加载

原本我们 到 router.js 里面是怎么写的

import Vue from 'vue'
import Router from 'vue-router'
//***


//引入组件
import ddd from '@/components/ddd'
Vue.use(Router);
export default new Router({
    routes: [
        //***
        {
            path: '/ddd',
            name: 'ddd',
            component: ddd,      //挂载到对应的路由地址上面
            meta: {
                title: 'ddd' 
            }
        }
    ]
})

路由懒加载之后

import Vue from 'vue'
import Router from 'vue-router'
//***
Vue.use(Router);
export default new Router({
    routes: [
        //***
        {
            path: '/ddd',
            name: 'ddd',
            component: ()=>import('@/components/ddd'),   es6语法
            component: resolve=>(require(["@/components/ddd"],resolve))  //另一种使用AMD模式
            meta: {
                title: 'ddd'
            }
        }
    ]
})

原本的我们组件加载

<template>
  <div class="hello">
  <One-com></One-com>
  </div>
</template>

<script>
import One from './one'
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

使用组件懒加载之后

<template>
  <div class="hello">
  <One-com></One-com>
  </div>
</template>

<script>
const One = ()=>import("./one");    //方式1：es6引入
export default {
  components:{
    "One-com":One                //方式1：挂载
    "One-com":resolve=>(['./one'],resolve)     //方式2 AMD方式 
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>