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