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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
ElementUI日期選擇器時間選擇范圍限制的實現(xiàn)
在日常開發(fā)中，我們會遇到一些情況，限制日期的范圍的選擇，本文就詳細的介紹了ElementUI日期選擇器時間選擇范圍限制的實現(xiàn)，文中通過示例代碼介紹的非常詳細，感興趣的可以了解一下2022-04-04
分享12個Vue開發(fā)中的性能優(yōu)化小技巧(實用!)
一般來說,你不需要太關心vue的運行時性能,它在運行時非常快,但付出的代價是初始化時相對較慢,下面這篇文章主要給大家分享介紹了十二個Vue開發(fā)中的性能優(yōu)化小技巧,需要的朋友可以參考下2022-02-02
Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了一個因@click.stop引發(fā)的bug的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
屏幕錄制和直播推流是現(xiàn)代Web應用中常用的功能,Vue作為一種流行的JavaScript框架,提供了一些工具和庫,可以方便地實現(xiàn)屏幕錄制和直播推流功能,本文將介紹如何在Vue中進行屏幕錄制和直播推流,需要的朋友可以參考下2024-01-01
vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關資料,Vue項目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實例（一），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vuex入門到上手教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章將會嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關的面試題時可以和面試官談笑風生,文中有相關的圖解和代碼示例,感興趣的同學跟著小編一起來看看吧2023-08-08