实现修改框架中的菜单部分，点击展开菜单直接跳转到第一个孩子的功能

背景

令人无语的甲方突然觉得菜单展开之后再点子菜单太麻烦了
让增加一个功能，点击菜单展开之后直接跳转到第一个子菜单

这tm就不是一个层级的代码啊！ 多点一下会shi吗！！！！！！！！！！！！！！！！！

尝试

我不是因为打不过他才写的，是我自己想写，我自愿的

1

首先我使用的源码是pureadmin框架
菜单封装的很不错，改了半天横向的菜单结果没用

2

找到相关代码
怎么找的呢？
就是从页面部分一层一层的往里找，从view里面的代码一层一层的查看，看到有个方法
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path,
)
获取父菜单的子菜单集合看是不是空，为空就怎么怎么样

真的很多，说明人家写的很厉害很复杂很安全

我这辈子和菜单杠上了 555~

3

所以有子菜单和只有一个子菜单的方法就是从这里分流的

实现

其实我就是在页面的地方改的哈哈哈，直截了当

第一步，添加组件的是否打开的监听

@open=“handleMenuOpen”

<el-scrollbar
      wrap-class="scrollbar-wrapper"
      :class="[device === 'mobile' ? 'mobile' : 'pc']"
    >
      <el-menu
        router
        unique-opened
        mode="vertical"
        class="outer-most select-none"
        :collapse="isCollapse"
        :default-active="defaultActive"
        :collapse-transition="false"
        @open="handleMenuOpen"
      >
        <sidebar-item
          v-for="routes in menuData"
          :key="routes.path"
          :item="routes"
          :base-path="routes.path"
          class="outer-most select-none"
        />
      </el-menu>
    </el-scrollbar>

然后添加相应的方法

const handleMenuOpen = (index: string, indexPath: string[]) => {
   
  const menu = usePermissionStoreHook().wholeMenus.find((item) => item.path === index);
  if (menu && menu.children && menu.children.length > 0) {
   
    const firstChild = menu.children[0];
    console.log(firstChild.path);
   // push(firstChild.path);
  //routes.push(modules[key].default);
    // // 执行路由跳转到第一个子菜单
    // route.path{
   firstChild.path};push(firstChild.path);
    //next({
    path: "/login" });
  //  tiaozhuan(firstChild.path);
  router.push(firstChild.path);
  }
};

然后这个路由跳转有点小插曲
可以看到我注释的是我之前尝试的，一直报错
结果我检查了一下我代码里面的router的index，发现默认导出的路由实例是router，我导入的是什么鬼啊

第三步，添加路由实例

import { router } from “@/router/index”;
就不会报错说那里是类型我这里当作实例使用的报错了

主要我当时路径也写错了

结语

这个代码是基于element plus的，里面的const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path,
)就是这个ui框架的默认的方法。

所以这个方法在所有element plus的菜单中都适用

补充

这个改变出现了一个bug，就是在页面刷新的时候会直接跳转到第一个孩子
因为这个刷新方法会再次调用open方法，当然也会调用跳转方法，

解决想法

首先是定义一个状态布尔值，来判定是否需要调用跳转方法

const handleMenuOpen = (index: string, indexPath: string[]) => {
   
  if (isMounted.value) {
   
    const menu = usePermissionStoreHook().</