若依框架前后端分离版,选择顶部菜单默认跳转第一个子路由或菜单(三级菜单)

修改src/components/TopNav/index.vue文件的handleSelect方法
在这里插入图片描述
handleSelect方法完整源码如下:

    // 菜单选择事件
    /**
     * index: 选中菜单项的 index,
     * indexPath: 选中菜单项的 index path
     */
    handleSelect(key, keyPath) {
      this.currentIndex = key;
      const route = this.routers.find((item) => item.path === key);
      //修改为完全隐藏左侧菜单
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        this.$router.push({ path: key });
        this.$store.dispatch("app/toggleSideBarHide", true);
      } else {
        /**
         * 处理点击顶部菜单,默认跳转第一个子菜单
         * 最多支持三级菜单
         */
        // 显示左侧联动菜单
        this.activeRoutes(key);
        // 获取第一个未隐藏的子路由
        for (let i = 0; i < route.children.length; i++) {
          if (route.children[i].hidden == false) {
            let firstUnHiddenChild = route.children[i];
            // 跳转到第一个未隐藏的子路由
            // 该路由仍包含子路由,需要再切一层
            if (firstUnHiddenChild.children != null) {
              for (let j = 0; j < firstUnHiddenChild.children.length; j++) {
                //找到第一个未隐藏的子路由
                if (firstUnHiddenChild.children[j].hidden == false) {
                  let firstUnHiddenChildTmp = firstUnHiddenChild.children[j];
                  //第三层路由path只有最后的路径,需要拼接父路由的路径
                  this.$router.push({
                    path: path.resolve(
                      firstUnHiddenChild.path,
                      firstUnHiddenChildTmp.path
                    ),
                    query:
                      firstUnHiddenChildTmp.query == undefined
                        ? null
                        : JSON.parse(firstUnHiddenChildTmp.query),
                  });
                  break;
                }
              }
            } else {
            //该路由不包含子路由,即只有两级菜单,直接跳转
              this.$router.push({
                path: firstUnHiddenChild.path,
                query:
                  firstUnHiddenChild.query == undefined
                    ? null
                    : JSON.parse(firstUnHiddenChild.query),
              });
            }
            break;
          }
        }
        this.$store.dispatch("app/toggleSideBarHide", false);
      }
    },

需要引入import path from “path”;

此方式仅适用于若依框架的前后端分离版,并且仅适用于菜单位于顶部的情况。目前,该方式仅支持三级菜单。如果您有任何关于兼容更多级菜单、提升性能或更优雅的编写方式的建议,欢迎补充!

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-19 17:38:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-19 17:38:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-19 17:38:04       87 阅读
  4. Python语言-面向对象

    2024-03-19 17:38:04       96 阅读

热门阅读

  1. 【代码随想录Day27】

    2024-03-19 17:38:04       41 阅读
  2. VUE3 自定义指令

    2024-03-19 17:38:04       43 阅读
  3. Leetcode--198

    2024-03-19 17:38:04       40 阅读
  4. Spring--设计模式

    2024-03-19 17:38:04       32 阅读
  5. UGUI源码分析与研究1-UGUI底层的实现原理

    2024-03-19 17:38:04       35 阅读
  6. 阿里巴巴中国站按关键字搜索工厂数据 API

    2024-03-19 17:38:04       36 阅读
  7. python代码截取任意页的pdf

    2024-03-19 17:38:04       45 阅读
  8. 数组的reduce 的使用和扁平化处理

    2024-03-19 17:38:04       36 阅读
  9. 在事务里发送普通消息引起的线上问题

    2024-03-19 17:38:04       47 阅读
  10. C# 通信断线重连问题说明与示例

    2024-03-19 17:38:04       46 阅读
  11. Springboot AOP

    2024-03-19 17:38:04       44 阅读
  12. 在MATLAB中进行并行计算和GPU加速?

    2024-03-19 17:38:04       46 阅读