當(dāng)需要使用后端數(shù)據(jù)來(lái)生成動(dòng)態(tài)路由是遇到一個(gè)問(wèn)題:
component:() =>import('@/xxx')
能夠正常路由，改為變量形式
component :() => import('@/views/' + path + '.vue')
點(diǎn)擊菜單路由視圖并不加載，報(bào)錯(cuò)
Cannot find module
出現(xiàn)這個(gè)問(wèn)題原因：
webpack 編譯es6 動(dòng)態(tài)引入 import() 時(shí)不能傳入變量，例如
dir ='path/to/my/file.js';
import(dir)
報(bào)錯(cuò)：Cannot find module
而要傳入字符串
import('path/to/my/file.js')
這是因?yàn)?code>webpack的現(xiàn)在的實(shí)現(xiàn)方式不能實(shí)現(xiàn)完全動(dòng)態(tài)。
但一定要用變量的時(shí)候生兆，可以通過(guò)字符串模板來(lái)提供部分信息給webpack；例如import(./path/${myFile})(這種方式我使用vue2.6之后的版本好像就不能用了), 這樣編譯時(shí)會(huì)編譯所有./path下的模塊膝宁，但運(yùn)行時(shí)確定myFile的值才會(huì)加載鸦难，從而實(shí)現(xiàn)懶加載根吁。
解決方法：
將
component = import('@/views/' + path + '.vue')
替換為：
// resolve不能省略
component = resolve => require([`@/views/${path}.vue`], resolve)
