element-ui - ElementPlus的ElMenuItem的选中状态怎么修改？

Question

大家好，有一个这样的需求：
我有一个画图的页面，如果跳转到其他路由页面时，有一个提示，“您的图形是否已经保存”，如果点击“否”，就路由不跳转，如果点击“是”是正常跳转，

我的问题：
现在的问题是只要点击了ElMenuItem选中状态就会选中，如何将选中状态返回到上一个菜单的选中，

我现在的解决方法：
现在我的方法是先拿到页面的document元素ul，再获取所有li元素，循环先移除 is-active 样式，再给需要的菜单增加 is-active 样式

解决方法出现的问题：
但是移除的样式有一个样式错误，而且再点击菜单时，菜单的选中状态也会有一些其他的bug，请问如何去手动修改控制ElMenuItem的样式

我的代码：
第一步：在 router.beforeEach的时候判断from.path是否是图形路由，如果是的话，弹层，是or否，点击否是走下面的代码：

            // 取消时，页面来自于 管路设计/集中控制，则还原导航菜单的选中状态
            if (from.path.includes("piping/plan") || from.path.includes("jizhong/concentrate")) {
              console.log("-----------取消操作");

              // 获取到ul元素 Lis
              const liElements = document.querySelector(".el-menu")?.querySelectorAll("li")

              // 循环遍历所有的 li 元素 移除选中状态
              liElements?.forEach(function (liElement) {
                if (liElement?.classList.contains("is-active")) {
                  liElement?.classList.remove("is-active")
                }
              });

              // 循环遍历所有的 li 元素 添加选中状态
              liElements?.forEach(function (liElement) {
                // 管路设计
                if (from.path.includes("piping/plan") && liElement?.innerHTML.includes(t("routers.gltc"))) { // 管路设计
                  liElement?.classList.add("is-active")
                }

                // 集中控制
                if (from.path.includes("jizhong/concentrate") && liElement?.innerHTML.includes(t("routers.jzlzc"))) { // 集中控制
                  liElement?.classList.add("is-active")
                }
              });
            }
            // 取消 按钮
            next(false)

Answer 1

每项菜单设置唯一的index，然后通过设置菜单的default-active属性就可以达到高亮的效果吧