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