elementui 导航条高亮,路由在导航中没有匹配的路由地址怎么高亮

 

 

 

数据结构:

[
        {
          title: languageChoose.leftnav.sy,
          path: "/",
          icon: "iconshouye"
          // chirldren: []
        },
        {
          title: languageChoose.leftnav.nrgl.nrgl,
          path: "/doorRenovation",
          icon: "iconxuexijilu",
          chirldren: [
            {
              title: languageChoose.leftnav.nrgl.mhzx,
              path: "/doorRenovation"
            },
            {
              title: languageChoose.leftnav.nrgl.zygl,
              path: "/resourceManage"
            },
            {
              title: languageChoose.leftnav.nrgl.nrsz,
              path: "/contentSetting"
            }
          ]
        },
        {
          title: languageChoose.leftnav.jxgl.jxgl,
          path: "/liveSeries",
          icon: "iconjiaoxueguanli",
          chirldren: [
            {
              title: languageChoose.leftnav.jxgl.xlzb,
              path: "/liveSeries"
            },

            {
              title: languageChoose.leftnav.jxgl.xlsp,
              path: "/videoSeries"
            },

            {
              title: languageChoose.leftnav.jxgl.kjgl,
              path: "/CoursewareManage"
            }
          ]
        },
        {
          title: languageChoose.leftnav.yhgl.yhgl,
          path: "/userManage",
          icon: "iconyonghuguanli",
          chirldren: [
            {
              title: languageChoose.leftnav.yhgl.yhlb,
              path: "/userList"
            },
            {
              title: languageChoose.leftnav.yhgl.xxts,
              path: "/teachermanage"
            }
          ]
        },
        {
          title: languageChoose.leftnav.jygl.jygl,
          path: "/transactionManage",
          icon: "iconqianbao",
          chirldren: [
            {
              title: languageChoose.leftnav.jygl.ddgl,
              path: "/orderManage"
            },
            {
              title: languageChoose.leftnav.jygl.tkgl,
              path: "/refundManage"
            },
            {
              title: languageChoose.leftnav.jygl.txgl,
              path: "/tixianManage"
            }
          ]
        },
        {
          title: languageChoose.leftnav.yxfa.yxfa,
          path: "/marketingProgram",
          icon: "iconkechengxiaoliang2",
          chirldren: [
            {
              title: languageChoose.leftnav.yxfa.zk,
              path: "/discount"
            },
            {
              title: languageChoose.leftnav.yxfa.kj,
              path: "/bargain"
            }
            // {
            //   title: languageChoose.leftnav.yxfa.fx,
            //   path: "/distribution"
            // }
          ]
        },
        {
          title: languageChoose.leftnav.sjbb,
          path: "/dataReport",
          icon: "iconkechengxiaoliang1"
          // chirldren: []
        },
        {
          title: languageChoose.leftnav.jcsz.jcsz,
          path: "/basicSetting",
          icon: "iconshezhi",
          chirldren: [
            {
              title: languageChoose.leftnav.jcsz.wxsz,
              path: "/schoolSetting"
            },
            {
              title: languageChoose.leftnav.jcsz.zdsz,
              path: "/fieldSetting"
            },

            {
              title: languageChoose.leftnav.jcsz.jsqx,
              path: "/roleSetting"
            },
            {
              title: languageChoose.leftnav.jcsz.zzjggl,
              path: "/organizationManage"
            }
          ]
        },
        {
          title: languageChoose.leftnav.yjfk,
          path: "/awards",
          icon: "iconlipin"
          // chirldren: []
        },
        {
          title: languageChoose.leftnav.help,
          path: "/help",
          icon: "iconbangzhuzhongxin"
          // chirldren: []
        }
      ];
 
 

 

 

 

computed: {
    /**
     * @msg: 根据路由地址,左侧菜单栏高亮显示的计算属性
     * @param {}
     * @return:路由地址("/路由名字")
     */
    defaultActive_Nav() {
      let routpath = this.$route.path;
      this.find(this.nav_menu_data, routpath);
      if (this.result) {
        return this.result;
      } else {
        switch (routpath) {
          //添加老师
          case "/teachermanageAdd":
            return "/teachermanage";
            break;
          // 学员管理详情
          case "/userListDetail":
            return "/userList";
            break;
        }
      }
    }
  },
 
 
 
 
methods: {
 /**
     * @msg:根据浏览器路由查找左侧菜单数组中对象的属性值是否存在,高亮显示
     * @param {arr:数组对象,routePath:需要查找的属性值}
     * @return:null
     */
 /**递归查找数据中是否有属性值 */
    find(arr, routePath) {
      if (!arr) {
        return;
      }
      arr.forEach(item => {
        //debugger;
        if (item.path == routePath) {
          this.result = item.path;
        } else {
          this.find(item.chirldren, routePath);
        }
      });
    }
}
 
 
 
------------------------------------------------------------------------搞了半天后发现其实不用这么麻烦,直接匹配路由的name------------------------------------------------------------------------

 

 

 ----------------------------------------做着做着就有更简洁的方法了---------------------------------------------------------------------

 

 

 

posted on 2020-05-22 11:16  忆小样  阅读(396)  评论(0编辑  收藏  举报