vue-router懒加载

Date: 2017-04-03

默认的加载模式：

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

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

但当项目过大时需要使用懒加载方法

用法1：

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

const HelloWorld = resolve => require(['@/components/HelloWorld'], resolve)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

用法2：

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

const HelloWorld = resolve => import('@/components/HelloWorld').then((module) => resolve(module))

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

用法3：

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

const HelloWorld = resolve => require.ensure([], () => resolve(require('@/components/HelloWorld')), 'HelloWorld')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})