文章参考

1. VUE2组件懒加载浅析
2. VUE+Webpack 实现懒加载的三种方式
3. 路由懒加载

Vue官方写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue') },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

commonjs写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: resolve => require(['./components/Home.vue'],resolve) },
      { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
    ]
  })
}

使用建议

建议使用Vue官方推荐的使用方法，如果对第二种commonJS写法不理解，就需要了解Nodejs中require的用法