问题说明

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

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>