vue 动态加载路由时,如何处理组件

使用vue cli3.x创建项目,登录之后,使用router.addRoutes(routers)方法动态添加后端传过来的权限配置文件时,如何处理组件的加载?
因为后台传过来的component是一个字符串,例如:

{
  path:"/home",
  name:"home",
  meta: {title: 'xxx},
  component:"./views/page/home"
}

而我们需要的是:

{
    path: '/home',
    name: 'home',
    meta: {title: 'xxx},
    component: () =>  import('./views/page/home') 
},

最简单的处理方式是:

let component = () => import('@/views/'+`${path}`)

因为import里面直接写变量会报错,所以需要使用模板字符串的方法,另外需要将'@/views/'写成固定的,直接写${path}或者@/${path},webpack都有可能无法识别,所以后端的配置文件,component数据可以直接传@/views/之后的路径

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容