vue3-vite动态路由导入组件不能使用模板字符串的问题

在我写动态路由的时候，菜单信息是从数据库中获取的。代码如下：

const modules = import.meta.glob("/src/views/**/*.vue");

const addroutre = () => {
  const menubarlist = JSON.parse(sessionStorage.getItem("menulist"));
  
  for (let index = 0; index < menubarlist.length; index++) {
    
    for (const key in menubarlist[index].children) {
      
      router.addRoute('home', {
        path: menubarlist[index].children[key].path,
        name: menubarlist[index].children[key].path,
        component:() => import(`@/views/${menubarlist[index].children[key].component}.vue`),
        meta: { title: menubarlist[index].children[key].remark },
      });
    }
  }
};

 刚开始用import导入动态组件的时候发现不支持这样，然后就会说不能导入这个组件，报错如下：

也可以用router获取所有路由的方法来查看:

• router.getRoutes()：获取一个包含所有路由记录的数组。
• router.hasRoute()：检查路由是否存在。

 

大家可以看一下写死的路由components信息：

主要就是看components,因为这个地方容易丢失

 在看一下动态路由components信息：

因为动态路由导入组件import不能使用模板字符串所有换一种方法！

 

解决方案：

官网：vite glob

需要导入一下

 const modules = import.meta.glob("/src/views/**/*.vue");

 重点：/src/views需要这种引入，不可以是../也能使@/要不然components是异常为空

那么献上我的案例吧：

const modules = import.meta.glob("/src/views/**/*.vue");

const addroutre = () => {
  const menubarlist = JSON.parse(sessionStorage.getItem("menulist"));
  
  for (let index = 0; index < menubarlist.length; index++) {
    
    for (const key in menubarlist[index].children) {
      
      router.addRoute('home', {
        path: menubarlist[index].children[key].path,
        name: menubarlist[index].children[key].path,
        component:modules[`/src/views/${menubarlist[index].children[key].component}.vue`],
        meta: { title: menubarlist[index].children[key].remark },
      });
    }
  }
};