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()
  }
相关推荐
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子1 天前
迭代器和生成器
前端·javascript
源猿人1 天前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 天前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖2 天前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬2 天前
Promise 的场景和最佳实践
前端·javascript
Asort2 天前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript