vue3出现Error: Unknown variable dynamic import

javascript 复制代码
Unknown variable dynamic import
前端做动态路由权限

   component = () => import(`../views/${url}/${url}.vue`)
1
解决方法:

  // 首先把你需要动态路由的组件地址全部获取
   
 let modules = import.meta.glob('../views/**/*.vue')
 
 // 然后动态路由的时候这样来取
 component = modules[`../views/${url}/${url}.vue`]

自定义案例
 navigationList.forEach( navigation => {
      let modules = import.meta.glob('../views/**/*.vue')
      router.addRoute('index', {
        path: navigation.url,
        // meta: { name: navigation.name, icon: navigation.icon },
        name: navigation.name,
        component: modules[`../views${navigation.url}${navigation.url}.vue`],
      })
    })
    console.log(router.getRoutes(), '查看现有路由')
    next()
  }
相关推荐
子兮曰22 分钟前
后端字段又改了?我撸了一个 BFF 数据适配器,从此再也不怕接口“屎山”!
前端·javascript·架构
颜酱3 小时前
一步步实现字符串计算器:从「转整数」到「带括号与优化」
javascript·后端·算法
比尔盖茨的大脑3 小时前
事件循环底层原理:从 V8 引擎到浏览器实现
前端·javascript·面试
卓卓不是桌桌3 小时前
如何优雅地处理 iframe 跨域通信?这是我的开源方案
javascript·架构
滕青山3 小时前
腾讯域名拦截查询 在线工具核心JS实现
前端·javascript·vue.js
进击的尘埃3 小时前
TypeScript 协变与逆变:你的泛型组件 Props 为什么总是类型报错?
javascript
helloweilei3 小时前
javascript 结构化克隆
javascript·node.js
龙猫不热3 小时前
从 0 手写 Promise:拆解 Promise 链式调用的实现原理
前端·javascript·面试
wuhen_n5 小时前
TypeScript 强力护航:PropType 与组件事件类型的声明
前端·javascript·vue.js
wuhen_n5 小时前
组件设计原则:如何设计一个高内聚、低耦合的 Vue 组件
前端·javascript·vue.js