vue-router懶加載的3種方式匯總
未使用懶加載
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等。他會給里面require的文件單獨(dú)打包，不會和主文件打包在一起。
第一個(gè)參數(shù)是數(shù)組，表明第二個(gè)參數(shù)里需要依賴的模塊，這些會提前加載。
第二個(gè)是回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里面require的文件會被單獨(dú)打包成一個(gè)chunk,不會和主文件打包在一起，這樣就生成了兩個(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3中如何使用codemirror6增加代碼提示功能的相關(guān)資料,Codemirror是一個(gè)不錯(cuò)的Web代碼編輯庫,可以方便簡單的集成,需要的朋友可以參考下2023-08-08
解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問題
這篇文章主要介紹了解決vue項(xiàng)目中出現(xiàn)"Invalid Host header"的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue增刪改查的簡單操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說明的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明
這篇文章主要介紹了vue-router 2.0 跳轉(zhuǎn)之router.push()用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例
這篇文章主要介紹了vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04
vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告
這篇文章主要為大家詳細(xì)介紹了vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
如果在template里使用的是ref類型的數(shù)據(jù),?那么Vue會自動(dòng)幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據(jù),?那么Vue不會自動(dòng)幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下2022-12-12