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