vue路由懒加载的几种方式

基础写法，没有懒加载，打包分离代码

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 } ] })

路由懒加载，ES6的import()方法。（按需加载）

这个是最常用的

import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld') Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld
　　　　//或者
　　　component: () => import("@/components/HelloWorld")

 } ] })

vue的异步组件，require()方法。（按需加载）

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['@/components/HelloWorld'], resolve), } ] })

vue的异步组件+webpack的ensure()方法。

import Vue from 'vue' import Router from 'vue-router' const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld') Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })

最优官方，懒加载和打包分离代码。

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld') } ] })