解决element-plus的menu菜单组件无限极多次使用，切换一级菜单后无法高亮问题

1 页面结构

顶部为一级菜单，左侧为无限极二级菜单

问题：当切换一级菜单之后，菜单只有在刷新之后才能有高亮属性，检查获取到的route.path是没有问题的，就是渲染不上，所以把问题定位到父组件与 子组件的渲染和传值问题上，

解决思路

1、在子组件上加一个v-if控制`

<LeftBar v-if="show" :menuList="LeftBarMenu" />

2、监听父组件所传值的改变

  watch(
      () => state.LeftBarMenu,
      (newpath, oldpath) => {
        state.show = false
        nextTick().then(function() {
          // DOM 更新了
          state.show = true
        })
      }
    )

在dom更新之后在进行渲染

附上递归组件代码

	//#  父组件
    <el-menu
      :default-active="leftbarActiveIndex"
      router
      text-color="#333"
      @select="menuSelect"
    >
      <!-- 调用子组件，传入需要递归的数据 -->
      <Side :menuList="menuList"></Side>
    </el-menu>

	//#  子组件
    <!-- 递归子菜单 -->
    <template v-for="(item, index) of menuList" :key="index">
      <!-- 判断有无子组件，有的为submenu，且需要继续调用本组件 -->
      <el-submenu v-if="item.childList">
        <template #title>
          <i class="el-icon-s-promotion"></i>
          <span>{{ item.menuName }}</span>
        </template>
        <!-- 调用子组件，传入需要递归的数据 -->
        <Side :menuList="item.childList"></Side>
      </el-submenu>
      <!-- 没有子组件，直接渲染最后一级菜单 -->
      <el-menu-item v-else :index="item.url">
        <template #title>
          <i class="el-icon-platform-eleme"></i>
          <span>{{ item.menuName}} </span>
        </template>
      </el-menu-item>
      <!-- :index="item.itemPath" -->
    </template>