element-admin 改造动态菜单,组件路径正确却一直报 cannt find module XXX

墨蓝 2021-11-16 13:36 159阅读 0赞

> 简要:  **import(\`@/views$\{item.component\}\`)  改为 import(\`@/views$\{url\}\`) , $\{\} 里面 Object.xxx 改为 xxx**
> 
> 记录一个之前 element-admin 改造成动态菜单时,引入组件时遇到的问题.
> 
> 当时动态加载到 组件 url 之后: 通过**  **itemSon.component = () => import(\`@/views$\{itemSon.component\}\`)  引入组件时,一直报 cannt find module XXX 的错误,但是检查几遍之后发现. 组件路径完全没有错误
> 
> 写成静态路径即:时  import(@/views/componentPath)** ** 也没有问题.说明编译 模板字符串出了问题. 
> 
> 考虑 **import 命令是静态的,可能编译不了复杂的模板字符串**.最后把写法改为**: ** 
> 
> let url = itemSon.component ;
> 
> itemSon.component = () => import(\`@/views$\{url \}\`) 
> 
> 就好了.

这里是改好的部分动态菜单代码:

// 递归,设置其子菜单的component (js中的函数引用都是 浅拷贝)
    function getChildrenMenu(item){
        if (item.children && item.children.length > 0 ) {
          for (let j = 0; j < item.children.length; j++) {
            let itemSon = item.children[j]
            // 这里事先,解析 url 字符串
            const url = itemSon.component
            // 二级以后菜单,作为父菜单
            if (url && itemSon.children.length > 0) {
              itemSon.component = FatherRoute
            }else if(url){
              itemSon.component = () => import(`@/views${url}`)
            }else{
              itemSon.component = () => import(`@/views/${notFound}`)
            }
            if (itemSon.children.length > 0) {
              getChildrenMenu(itemSon)
            }
          }
        }
    }