vue如何引入动态组件

番茄炒蛋

最近在用vue做用户权限的时候遇到了个问题:路由数据是后端根据用户角色生成的路由表,前端拿到数据后通过vue-router的addRoutes()方法动态添加上去。

后端给我返回的数据格式是这样的:image.png
其中filePath对应的是router对象里的component字段,而router的component是通过import引入的一个文件,image.png

后端给我返回的是文件路径的字符串,那我该怎么动态的引入这些文件呢?

解决:其实vue有给我们提供加载异步组件的方法:https://cn.vuejs.org/v2/guide...
image.png
如图所示,vue的组件注册接收一个resolve回调方法,在这个方法里通过一个特殊require可以把filePath所指向的文件成功引进来。

route.component = resolve => require([`@/views/${item.filePath}`],resolve)

注:1、使用该方法后某些没有使用到的文件如果有语法错误或者缺少依赖,即使在全局都没有使用到这个文件,都会报错。我的猜想是使用这个方法后webpack会默认把所有文件都打包进来,相当于把所有文件都import了一遍,所以我们在异步获取路由之后才可以使用import或者require引入文件。

2、动态路由的path字段要使用全路径,不然会报错。
我们在router注册嵌套路由的时候
{
  path: 'a',
  name: '一级路由',
  component: { render(c) { return c('router-view') } },
  meta: { title: '一级路由' },
  children: [
    {
      path: 'b',
      name: '二级路由',
      component: () => import('@/views/assetsCenter/index.vue'),
      meta: { title: '二级路由' }
    }]
 }

这种情况下我们进入二级路由b页面是,path是会帮我们自动补全的,变成/a/b
但动态路由里我这样使用path字段就会跳到404,需要改成

{
  path: '/a',
  name: '一级路由',
  component: { render(c) { return c('router-view') } },
  meta: { title: '一级路由' },
  children: [
    {
      path: '/a/b',
      name: '二级路由',
      component: () => import('@/views/assetsCenter/index.vue'),
      meta: { title: '二级路由' }
    }]
 }
阅读 1.1k
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
宣传栏