vue动态加载页面组件

问题说明

在开发时遇到一个问题：在同一个页面，局部页面要根据下拉框的选项来动态加载不同的页面。
参考

1.Vue 下拉框代码

<el-form-item label="合约分类" prop="feeContractType">
        <el-select v-model="contractList.contractTypeCode" placeholder="请选择所属合约分类" 		clearable size="small" @change="ct_selectChanged">
          <el-option v-for="item in contractList" :key="item.contractTypeId" :label="item.contractTypeName" :value="{id: item.contractTypeId, path: item.contractTypePath}"></el-option>
        </el-select>
</el-form-item>

其中item.contractTypePath 是存储在数据库中的路径 components/ContractTemplate/muban1
下拉框选择模板1，模板2的时候，部分页面加载模板页面

2.设置页面组件

 <component ref="detail" :is="contractComponent" ></component>

3.方法

ct_selectChanged(value) {
      let path = value.path;     
      return this.contractComponent = (resolve) => require([`@/views/${path}`], resolve)
}

上述代码中的require中的符号 “`” 不是单引号，而是esc按键下面的那颗按键

4.完整代码

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="合约分类" prop="feeContractType">
        <el-select v-model="contractList.contractTypeCode" placeholder="请选择所属合约分类" clearable size="small" @change="ct_selectChanged">
          <el-option v-for="item in contractList" :key="item.contractTypeId" :label="item.contractTypeName" :value="{id: item.contractTypeId, path: item.contractTypePath}"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <component ref="detail" :is="contractComponent" ></component>
  </div>
</template>
<script>
import { listActiveContractType } from "@/api/system/contractType";
export default {
  name: "ContractTemplate",
  data() {
    return {
      //笼罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        contractTypeStatus: 0
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      contractList: [],
      contractComponent: null,
    };
  },
  created() {
    this.getContractType();

  },
  methods: {
    ct_selectChanged(value) {
      let path = value.path;
      return this.contractComponent = (resolve) => require([`@/views/${path}`], resolve)
    },

    /** 得到分类列表 */
    getContractType(){
      listActiveContractType(this.queryParams).then(response =>{
        this.contractList = response.rows;
        console.log(response.rows)
      })
    },
  }
};
</script>