Vue2在一个页面内动态切换菜单显示对应的路由组件，Vue2动态切换菜单与路由组件的页面交互功能展示

Vue 2能够实现在一个页面内动态切换菜单显示对应的路由组件。通过使用Vue的动态组件和路由功能，开发者可以根据用户的选择或页面状态，动态地加载和切换不同的路由组件，从而改变菜单的显示内容。这种特性使得Vue应用更加灵活，用户体验更加流畅。用户可以通过点击菜单项，触发相应的路由组件的加载和显示，实现页面的快速切换和内容的动态更新。

import { menulist } from "@/api/pmc/MenuTab";
export default {
  data() {
    return {
      activeName: 'second', // 当前显示的tab的标签名
      currentComponent: '', // 当前组件的名字
      list: [], // 菜单数组
      curdizhi: '', // 当前菜单的路径，"pmc/DeptBaseInfo/index"
      deptId: '', // 公司的id，从路由地址传过来
    };
  },
  components: {},
  computed: {
    asyncComponent() {
      // 动态导入组件的逻辑
      console.log("动态加载组件路径：",@/views/${this.curdizhi});
      return () => import(@/views/${this.curdizhi}); // 使用动态导入语法
    }
  },
  created() {
    this.deptId = this.$route.query.deptId; // 获取路由中传过来的deptId参数
    console.log("页面地址传来的参数：", this.deptId);
    // 获取菜单列表
    this.getList();
  },
  methods: {
    /** 查询菜单列表 */
    getList() {
      this.loading = true; // 假设loading是数据加载的标识，这里需要您自行定义或引入相关逻辑
      menulist().then(response => {
        this.loading = false; // 加载完成，设置loading为false
        console.log("菜单列表response", response); // 打印响应数据
        this.list = response.rows; // 设置菜单数组为响应数据中的rows字段
        if (response.rows.length > 0) { // 如果响应数据中有数据，则进行后续操作
          let firstMenuItem = response.rows[0]; // 获取第一个路由对象
          this.activeName = firstMenuItem.signName; // 设置当前显示的标签名
          this.curdizhi = firstMenuItem.dictPath; // 设置当前菜单的路径为第一个菜单项的路径
        } else {
          // 处理没有数据的情况，例如显示提示信息或默认组件等
        }
      });
    },
    // tab切换点击事件
    handleClick(tab, event) {
      console.log("点击的第几项index", tab.index); // 打印点击的索引值
      let index = tab.index; // 获取点击的索引值
      let currentMenuItem = this.list[index]; // 获取当前点击的菜单项信息
      this.curdizhi = currentMenuItem.dictPath; // 更新当前菜单的路径为点击的菜单项的路径
      // 根据当前菜单的路径动态加载对应的组件并显示在页面上，这里可以使用Vue的异步组件和key属性来实现切换效果，具体实现方式需要根据您的项目结构和框架来确定，这里只是一个大致的思路。
    }
  }
};

上述代码中的注释部分需要根据您的实际情况进行调整和完善，关于动态加载组件的部分，具体的实现方式可能因项目结构和使用的框架而有所不同，您需要根据自己的项目情况进行调整，确保动态加载组件的逻辑能够正确工作。