vue路由懒加载

懒加载

在需要的时候进行加载。

webpack支持的异步加载方法

1、比较常见，支持性良好

resolve => require([URL], resolve)

2、需要配合babel的syntax-dynamic-import插件使用

() => import(URL)

3、已逐渐废弃，不推荐

() => system.import(URL)

路由懒加载

方式一

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

const Index = resolve => require(['@/views/Index'], resolve)

Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'index',
    component: Index,
  }]
})
export default router

方式二

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

const Index = () => import('@/views/Index')

Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'index',
    component: Index,
  }]
})
export default router