解决element Menu 菜单刷新激活菜单样式重置的问题

组件解释 

<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>

这里引用的是官方的代码，今天我们主要看两个属性：

第一个 default-active 属性就是用来识别激活状态下的子菜单，所以我们要给每个子菜单的 index

赋不同的值才可以区分；第二个 router 属性就是可以点击子菜单切换router，只需要在子菜单下面加 :route="{ path: 路径 }" 如下图所示就可以了，但前提是你的roter路径要配好：

问题引出：

当我们搞好菜单栏和router之后，点击菜单项可以切换路径了，但是刷新了之后激活的菜单样式就换还原，这是因为我们的数据都是死的，解决这个问题其实也很简单，上面也说了，default-active 属性是用来识别激活状态下的子菜单，我们只需要把这个属性变成活的就可以了，不是吗？话不多说，直接看代码

代码实现：

* 我们在设计router路径的时候要见名知意，不要重复。 

要想把 default-active 变成活的只需要在写的时候再见面加个冒号，即 :default-active，然后再定义一个双向绑定数据，关联起来就可以了。但是我们怎样才可以定义不同的active呢，那就又要提router了，我们定义router的时候不是不能重复吗？我们只需要拿到roter的path路径就可以了，再从里面取对应的来充当我们的active属性就可以了，代码如下：

import { ref, computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const active = computed(() => {
  const path = route.path; //获得path路径，要注意自己的路由参数类型
  let arr = path.split("/"); //分割成数组
  return arr[2]; //返回对应的路径就可以了
});

我用的是计算属性，这样路径变化的时候属性就会自动刷新，这样也不会有抖动，之前用了onMounted 钩子函数，发现会抖动，影响页面美观，代码还比计算属性多。这样的话就不论怎么刷新，样式都是没毛病的。

希望我的分享可以帮助到大家