未使用懶載入

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

vue非同步元件

component:resolve=>{reuqi程式設計客棧re([‘需要載入的路由地址']),resolve)

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
rou
 
程式設計客棧tes:[
	{path:'./',component:HelloWorld
	}
]
})

ES6的import()

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld=()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Route程式設計客棧r({
	routes:[{
	{path:'./',component:HelloWorld
	}
	}]
})

webpack的require.ensure()

require.ensure可實現按需載入資源，包括js,css等。他會給裡面require的檔案單獨打包，不會和主檔案打包在一起。

第一個引數是陣列，表明第二個引數裡需要依賴的模組，這些會提前載入。

第二個是回撥函式,在這個回撥函式裡面require的檔案會被單獨打包成一個chunkQhiYyYJxQ,不會和主檔案打包在一起，這樣就生成了兩個chunk,第一次載入時只加載主檔案。

第三個引數是錯誤回撥。

第四個引數是單獨打包的chunk的檔名

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

總結

到此這篇關於vue-router懶載入的3種方式的文章就介紹到這了,更多相關vue-router懶載入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！