vue-router懶加載的3種方式匯總

Posted on by

未使用懶加載

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=>{reuqire([‘需要加載的路由地址’]),resolve)

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

ES6的import()

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

webpack的require.ensure()

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

第一個參數是數組，表明第二個參數裡需要依賴的模塊，這些會提前加載。

第二個是回調函數,在這個回調函數裡面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成瞭兩個chunk,第一次加載時隻加載主文件。

第三個參數是錯誤回調。

第四個參數是單獨打包的chunk的文件名

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

總結

到此這篇關於vue-router懶加載的3種方式的文章就介紹到這瞭,更多相關vue-router懶加載內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：