vite動態(tài)導(dǎo)入頁面動態(tài)import組件實現(xiàn)方式
更新時間：2026年04月29日 09:19:18 作者：yangliweigauguagua
本文總結(jié)了在使用Vite進行動態(tài)導(dǎo)入頁面和組件時遇到的問題,由于Vite與Webpack在處理動態(tài)import方面有所不同,需要采用特殊方法,文章強調(diào)了從后臺獲取路由表并動態(tài)引入組件的實踐方法
vite動態(tài)導(dǎo)入頁面動態(tài)import組件
在做權(quán)限的時候
從后臺拉路由表，然后動態(tài)引入組件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法
//引入所有views下.vue文件
const modules = import.meta.glob("../views/**/**.vue");
/**
* 解析路由表
* @param routerMap 后臺請求的路由表
* @returns 系統(tǒng)路由
*/
export const routerFilterFunc = (routerMap: RouterItem[]) => {
const arr: RouterItem[] = [];
routerMap.forEach(item => {
const obj: RouterItem = {
...item,
beforeComponent: item.component
};
if (obj.children) {
obj.children = routerFilterFunc(obj.children);
}
if (item.component == "Layout") {
obj.component = RouterView;
} else {
const component = modules[`../views/${obj.component}.vue`] as any;
if (component) {
obj.component = modules[`../views/${obj.component}.vue`];
} else {
obj.component = () => import("@/views/404.vue");
}
}
arr.push(obj);
});
return arr;
};
這是
import.meta.glob("../views/**/**.vue")獲取的內(nèi)容
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
vue3實現(xiàn)按鈕級別權(quán)限控制的兩種方法
本文給大家介紹vue3實現(xiàn)按鈕級別權(quán)限控制的兩種方法,每種方法結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-08-08
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語法示例代碼,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下2021-04-04
無論是移動端還是pc端登錄或者注冊界面都會見到手機驗證碼登錄這個功能，輸入手機號，得到驗證碼，這篇文章主要介紹了基于vue實現(xiàn)短信驗證碼登錄功能,需要的朋友可以參考下2019-12-12
如何在 ant 的table中實現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實現(xiàn)圖片的渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
學(xué)習(xí)過vue2的寶子們肯定知道,組件傳值是vue項目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關(guān)于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動格式化問題，對vscode 開發(fā)uniapp的相關(guān)知識感興趣的朋友一起看看吧2021-08-08
vue實現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機端web(實現(xiàn)過程)
vue實現(xiàn)錄音并轉(zhuǎn)文字功能,包括PC端,手機端和企業(yè)微信自建應(yīng)用端,本文通過實例代碼介紹vue實現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機端web,感興趣的朋友跟隨小編一起看看吧2024-08-08