el-menu的default-active

### Vue3 中 `el-menu` 组件 `default-active` 属性详解

#### 一、属性说明
`default-active` 是 Element UI 的菜单组件 (`el-menu`) 提供的一个重要属性，用于设置当前激活菜单的索引。当页面加载或刷新时，默认选中的菜单项会依据此属性指定的值来决定[^1]。

#### 二、使用场景
对于单页应用(SPA)，通常希望用户在切换路由后仍能记住之前所处的位置，在这种情况下就可以利用 `$route.path` 来动态绑定 `default-active` ，从而实现导航栏高亮显示对应路径的功能。

#### 三、具体实例展示
下面是一个完整的例子展示了如何配置 `el-menu` 并使其支持页面刷新后的选项卡记忆功能：

<template>
  <div id="app">
    <!-- 菜单项 -->
    <el-menu 
      class="el-menu-vertical-demo"
      :collapse="isCollapse" 
      background-color="#001529" 
      text-color="white" 
      active-text-color="yellowgreen" 
      router 
      :default-active="$route.path"> 

      <el-submenu index="/example1">
        <template slot="title"><i class="el-icon-message"></i>Example One</template>
          <el-menu-item-group>
            <el-menu-item index="/example1/subitem1">Sub Item 1</el-menu-item>
            <el-menu-item index="/example1/subitem2">Sub Item 2</el-menu-item>
          </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/example2">
        <i class="el-icon-menu"></i><span slot="title">Example Two</span>
      </el-menu-item>

    </el-menu>
    
    <!-- 主要内容区域 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return { isCollapse: false };
  },
};
</script>

上述代码片段中，通过将 `default-active` 设置为 `$route.path` 实现了根据当前 URL 自动匹配并突出显示相应的菜单条目。

#### 四、常见问题解决方案
如果遇到点击链接跳转正常但是刷新页面丢失状态的情况，可以尝试以下几种方式解决问题：
- 确认是否已经安装最新版本的 vue-router 和 element-plus；
- 检查项目里是否有其他地方覆盖掉了默认行为；
- 尝试移除可能干扰到路由监听的部分逻辑；