若依框架实现一级目录和左侧二级菜单的联动

最近使用若依框架开发项目，ruoyi的菜单管理根据权限分成了目录，菜单，按钮三种粒度，目录和菜单的区别是，目录自身没有路由，由子菜单进行路由。所以点击目录无法跳转页面，有这样一个需求，当点击一级目录的时候， 页面要发生跳转，并且在跳转的同时在左侧菜单栏中打开与之对应模块的二级菜单，实现目录与菜单的联动。

如下图：当点击系统管理时，默认打开系统管理目录下面的用户管理菜单，并跳转页面

 实现方法：

1、在项目中找到顶部菜单所在的位置上，给目录绑定点击事件，获取当前目录及目录下的二级菜单列表（注：更多菜单里面的目录也要绑定点击事件）

<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
  >
  <!-- 顶部菜单绑定click事件 -->
    <template v-for="(item, index) in topMenus">
      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" @click="clickItem(item)" v-if="index < visibleNumber"
        ><svg-icon :icon-class="item.meta.icon" />
        {{ item.meta.title }}</el-menu-item
      >
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.path"
          :key="index"
          @click="clickItem(item)"
          v-if="index >= visibleNumber"
          ><svg-icon :icon-class="item.meta.icon" />
          {{ item.meta.title }}</el-menu-item
        >
      </template>
    </el-submenu>
  </el-menu>
</template>

export default {
data() {
    return {
      pathName:'',//主目录
      pathChildren:[],//目录下二级菜单列表
      // 顶部栏初始数
      visibleNumber: 5,
      // 当前激活菜单的 index
      currentIndex: undefined
    };
  },
 methods: {
//目录点击事件
    clickItem(obj){
      this.pathChildren = []
      this.pathChildren = [...obj.children]
      this.pathName = obj.path
    }
 }
}

2、写一个监听，监听目录的变化，打开目录相对应的菜单项，通过this.$router.push(），实现一级目录与二级菜单的联动。

watch: {
//监听目录
  'pathName': function (newVal) {
    if (this.pathChildren && this.pathChildren.length > 0) {
      this.$router.push({path:this.pathChildren[0].path,});
    }
  },
},