Vue2在一个页面内动态切换菜单显示对应的路由组件

项目的需求是在一个页面内动态获取导航菜单，导航菜单切换的时候显示对应的路由页面，类似于tab切换的形式，切换的导航菜单和页面左侧导航菜单是同一个路由组件，只是放到了一个页面上，显示的个数不同，所有是动态获取的；效果如下图：

 使用动态加载路由方式import('@/views/pmc/info/index')import里面的是固定值，不能是变量，写变量就会报错，但我的需求是需要动态获取，所以找到了一个可行的方法，具体代码示例如下：

<template><div class="app-container"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in list" :key="index" :label="item.dictName" :name="item.signName"></el-tab-pane><!-- <el-tab-pane label="基本信息" name="second"></el-tab-pane><el-tab-pane label="历史沿革" name="third"></el-tab-pane>--></el-tabs><keep-alive>  <!-- <component :is="currentComponent"></component> --><component :is="asyncComponent" :mydeptId="deptId"></component></keep-alive></div>
</template>
<script>
import { menulist } from "@/api/pmc/MenuTab";export default {data() {return {activeName: 'second',//当前显示的tab的namecurrentComponent:"",// 当前组件的名字list:[],//菜单数组curdizhi:"",//当前菜单的路径，例如："pmc/DeptBaseInfo/index"deptId:"",//公司的id，从路由地址传过来的};},components: { },computed: {  asyncComponent() {  // console.log("`@/views/${this.curdizhi}`--15:",`@/views/${this.curdizhi}`) return () => require.ensure([], (require) => require(`@/views/${this.curdizhi}`))}  },created(){this.deptId=this.$route.query.deptIdconsole.log("页面地址传来的参数：",this.deptId)//获取菜单列表this.getList();// this.currentComponent= () => import('@/views/pmc/info/index'); //第一个的组件地址路径，这里为了测试，应该写到getList()//方法的成功回调里面，当前组件currentComponent赋初值,还要给activeName赋初值},methods: {/** 查询菜单列表 */getList() {this.loading = true;menulist().then(response => {this.loading = false;console.log("菜单列表response3-13",response)this.list = response.rows;let oneobj=response.rows[0] //第一个路由对象// let one='@/views/'+response.rows[0].dictPath;//第一个数组中的对象路径//  that.currentComponent= () => import(one); //第一个的组件地址路径，这样写报错，import里面不能写变量this.activeName=oneobj.signName;//当前显示的标签的name赋值this.curdizhi=oneobj.dictPath //当前的路由页面});},//tab切换点击事件handleClick(tab, event) {// console.log("点击事件3-12：tab",tab);// console.log("点击事件3-12：event",event);console.log("点击的第几项index",tab.index)let index=tab.index;//tab选项在数组中的下标值let list=this.list;//菜单数组let curobj=list[index];//当前点击的路由对象let curdizhi=list[index].dictPath;//当前显示的菜单路由是点击的这条数据的路由地址this.curdizhi=curdizhi;//当前路由地址赋初值// if(index==0){//   this.currentComponent= () => import('@/views/pmc/info/index'); // }}}};
</script>