Vue 动态获取组件与动态路由获取组件

一、动态获取模板

1. 给变量 showView 赋值一个模板

2. 页面通过 :is 关键字引入模板

showView.value = require(`@/views/antv/x6/${item.key}/index.vue`).default;

<a-col :xs="16" :sm="17" :md="18" :lg="19" :xl="20" class="d-flex">

  <a-card class="flex d-flex">

    <component

      :is="showView"

      class="shadow-6"

    ></component>

  </a-card>

</a-col>

二、动态获取路由

1. 后台获取菜单数据

2. 根据数据内指定的模板路径，给菜单 component 属性动态关联模板

route.component = () => require(`@/${route.cdlj}`).default

    'permissions': [
        {
          path: '/',
          name: 'index',
          cdlj:'layouts/BasicLayout',
          meta: { title: '123' },
          redirect: '/N01',
          children: [
            {
              path: '/N01',
              name: 'dbsy',
              cdlj:  'views/dbsy/DBSY',
              meta: { title: '待办事宜', permission: ['app'] },
            },
          ]
        }
      ]