vue中動態(tài)路由加載組件,找不到module問題及解決
更新時間：2023年06月30日 11:07:10 作者：齊天大頭
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue動態(tài)路由加載組件，找不到module
vue動態(tài)加載路由并掛載到vue。
路由信息由后端給出，同時component的路徑也是后端給出，但是動態(tài)加載該路徑會報錯。
原因
webpack 編譯es6 動態(tài)引入 import() 時不能傳入變量，因此webpack目前不能做到完全的動態(tài)加載路由
解決方案
在import時，拼接一個靜態(tài)的字符串，這樣webpack就可以正常加載了。
?temp.component = () => import(`@/views/${menu.menuVueComponent}`) // 正確
?temp.component = () => import(`${menu.menuVueComponent}`) // 不能加載
?temp.component = () => import(menu.menuVueComponent) // 不能加載前面直接拼@/會有一個scss樣式報錯，因為我在這里用的是vue-admin-template，可能是模板本身的問題，完全自己編寫的后端不清楚會不會這樣，如果@/不行，就多拼幾層目錄
vue動態(tài)路由加載時Cannot find module xxx錯誤解決
vue由靜態(tài)路由改為動態(tài)路由時，出現(xiàn)下面的錯誤
靜態(tài)路由懶加載，當我們把在router里面，把它寫死在ts里時，它加載的ok的，可是我們通過api接口拉取過來的數(shù)據(jù)時，發(fā)現(xiàn)是不報了上面的錯
// 靜態(tài)路由懶加載
export const loadView = (view: any) => {
return () => import(`@/views/${view}.vue`)
}錯誤原因是webpack打包邏輯，webpack4中動態(tài)import不支持變量方式，查看路由返回的信息，只是返回一個方法。
而靜態(tài)路由的返回，這個才是正確的組件返回方式
但是我們是要改為動態(tài)路由，則必須把它修改為
這樣動態(tài)路由加載就OK了
export const loadView = (view: any) => {
return (resolve: any) => require([`@/views/${view}.vue`], resolve)
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue中使用Video標簽播放?＜解析后的短視頻＞去水印視頻無響應的解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了Element el-button 按鈕組件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
通過100行代碼幫助大家理解和分析vue2.0響應式架構(gòu)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進行代碼高亮與語法著色，Vue提供了多種方式來實現(xiàn)代碼高亮與語法著色，本文將為你詳細介紹這些方法,需要的朋友可以參考下2023-06-06
vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue.js 圖標選擇組件實踐詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue+Electron打包桌面應用超詳細完整教程,在這大家要記住整個項目的json文件不能有注釋,及時沒報錯也不行,否則運行命令時還是有問題,具體細節(jié)問題參考下本文詳細講解2024-02-02
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
一文帶你掌握Vue?Router4進行頁面跳轉(zhuǎn)處理
Vue?Router是Vue.js官方的路由管理器,它能讓你用組件化的思維來管理你的頁面和視圖,這篇文章會帶你從零開始介紹Vue?Router4處理頁面跳轉(zhuǎn)的相關(guān)知識吧2025-12-12