快捷導(dǎo)航

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

更新時(shí)間：2021年02月28日 10:29:43 作者：默翟

這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

未使用懶加載

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可實(shí)現(xiàn)按需加載資源，包括js,css等。他會(huì)給里面require的文件單獨(dú)打包，不會(huì)和主文件打包在一起。

第一個(gè)參數(shù)是數(shù)組，表明第二個(gè)參數(shù)里需要依賴的模塊，這些會(huì)提前加載。

第二個(gè)是回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里面require的文件會(huì)被單獨(dú)打包成一個(gè)chunk,不會(huì)和主文件打包在一起，這樣就生成了兩個(gè)chunk,第一次加載時(shí)只加載主文件。

第三個(gè)參數(shù)是錯(cuò)誤回調(diào)。

第四個(gè)參數(shù)是單獨(dú)打包的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
	}
	}]
})

總結(jié)

到此這篇關(guān)于vue-router懶加載的3種方式的文章就介紹到這了,更多相關(guān)vue-router懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-cli3腳手架的配置及使用教程
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下
2018-08-08
如何在寶塔面板部署vue項(xiàng)目
這篇文章主要給大家介紹了關(guān)于如何在寶塔面板部署vue項(xiàng)目的相關(guān)資料,寶塔面板可以通過(guò)Nginx來(lái)部署Vue項(xiàng)目,并解決跨域問(wèn)題,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法匯總
這篇文章主要介紹了vue中this.$router.push()路由傳值和獲取的兩種常見(jiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
vue跳轉(zhuǎn)頁(yè)面的幾種常用方法代碼示例
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁(yè)面的幾種常用方法,vue跳轉(zhuǎn)頁(yè)面有好幾種不同方法,文中通過(guò)代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-10-10
vue watch監(jiān)聽(tīng)數(shù)據(jù)變化的案例詳解
監(jiān)聽(tīng)數(shù)據(jù)變化，在Vue中是通過(guò)偵聽(tīng)器來(lái)實(shí)現(xiàn)的，你也可以將它理解為監(jiān)聽(tīng)器，時(shí)刻監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化，本文將通過(guò)代碼示例為大家詳細(xì)的介紹一下vue watch如何監(jiān)聽(tīng)數(shù)據(jù)變化,需要的朋友可以參考下
2023-07-07
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
Vue3中操作ref的四種使用方式示例代碼(建議收藏)
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue使用mui遇到的坑及解決
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue移動(dòng)端路由切換實(shí)例分析
本篇文章給大家分享了vue移動(dòng)端路由切換實(shí)例以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。
2018-05-05