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

修改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”;

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

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叮叮当当0543

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值