还原问题:

动态路由实现(参考博客):https://blog.csdn.net/weixin_42510962/article/details/112618116

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

 let rts = []
// 设置动态路由
function setMoveRouter(menus){
    for (let i = 0; i < menus.length; i++) {
      let rt = {
          path: menus[i].menuPath,
          component: ()=>import('@/views/system/LoginLog.vue')  // 问题代码:暂时还没问题
          meta:{title:menus[i].menuName}
      }

      rts.push(rt)            //这里就将每个菜单的路由push进去了
  
      // if (menus[i].childMenuList && menus[i].childMenuList.length > 0) {  //当存在子菜单时
      //     setMoveRouter(menus[i].childMenuList)  //递归实现子菜单的路由设置
      // }
    }

刚开始被动态路由折磨了很久,为了一步步验证问题,暂时把导入组件写死了,。诶效果出来了,返回了对应的界面。

而后,我开始换成动态的时候,代码如下

component: ()=>import(`@/views/${menus[i].menuComponent}`)  // 问题代码:开始有问题了

报错了:我郁闷了,这路径没错啊,返回确认路径,及数据库路径,实在是没问题。

image-20220424144930122

于是我打印路由信息: console.log(router.getRoutes()),第0个,点进去

image-20220424145336887

image-20220424145438078

而后百度这个异常异常:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.s (<anonymous>:1:83

控制台也报警告:

The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. 
If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

经过一系列的百度,最终确定问题:是vue3 + vite 不能这样导入组件。

解决方案:

官网:vite glob

image-20220424151157591

那么献上我的案例吧:

const modules = import.meta.glob('@/views/*/*.vue')  // 导入
  
  function setMoveRouter(menus){
    for (let i = 0; i < menus.length; i++) 
      let rt = {
          path: menus[i].menuPath,
          component: modules[`@/views/${menus[i].menuComponent}`], // 这里  这里
          meta:{title:menus[i].menuName}
      }
      rts.push(rt)            //这里就将每个菜单的路由push进去了
    }
Logo

前往低代码交流专区

更多推荐