解決vue的router組件component在import時不能使用變量問題
webpack 編譯es6 動態(tài)引入 import() 時不能傳入變量，例如dir ='path/to/my/file.js' ； import(dir) , 而要傳入字符串 import(‘path/to/my/file.js')，這是因為webpack的現(xiàn)在的實現(xiàn)方式不能實現(xiàn)完全動態(tài)。
但一定要用變量的時候，可以通過字符串模板來提供部分信息給webpack；例如import(./path/${myFile}), 這樣編譯時會編譯所有./path下的模塊，但運行時確定myFile的值才會加載，從而實現(xiàn)懶加載。
import語法參考資料如下：點擊進入
修改后
補充知識：由vue-router中component: ()=>import()引發(fā)的ES6箭頭函數(shù)的語法問題
Vue-router動態(tài)加載組件的語法方式為:
component: ()=>import()
最近在項目中不下心寫成了
component: ()=>{import()}
由此引發(fā)了ES6中箭頭函數(shù)語法的問題：
1. ()=>: 沒有{}的時候，箭頭函數(shù)指向的就是這個函數(shù)的返回值(對應的組件,這個路由就會顯示內(nèi)容啦)；
2.()=>{}: 有{}的時候，箭頭函數(shù)在沒有指明return的時候什么都不返回(對應的組件,這個路由就什么都不會顯示啦)
另外，webpack3的Magic Comments，可以指定打包文件是的chunk的名字，寫法如下:
component: ()=>import(/* webpackChunkName: "chunkName" */ )
以上這篇解決vue的router組件component在import時不能使用變量問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)html轉(zhuǎn)化pdf并復制文字
這篇文章主要為大家詳細介紹了vue實現(xiàn)html轉(zhuǎn)化pdf的兩種方式,分別為能復制文字和不能復制文字的方法,有需要的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要為大家詳細介紹了vue3.x使用swiper實現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了深入理解Vue 的條件渲染和列表渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue 項目代碼拆分的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue項目中onscroll的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
ElementUI中el-dropdown-item點擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vuex的各個模塊封裝的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06