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

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

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

  
    
      
      
    
      
      
      
    
  


import { menulist } from "@/api/pmc/MenuTab";
  export default {
    data() {
      return {
        activeName: 'second',//当前显示的tab的name
        currentComponent:"",// 当前组件的名字
        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.deptId
      console.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'); 
        // }
      }
    }
  };

手机扫描二维码访问