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