element-plus刷新后菜单不选中不高亮的问题

在使用element-plus的el-menu组件时发现刷新页面后，菜单不会默认选中也不会高亮。

很多答案都没有说明真正的原因在哪里，代码又多看起来颇为费力，实际上只要设置el-menu组件的default-active属性

<template>
  <el-menu
    :default-active="defaultMenu" // 设置:default-active
    class="el-menu-vertical-demo"
    background-color="#545c64"
    active-text-color="#409eff"
    text-color="#fff"
  >
    <template v-for="menu in menuList">		// 设置:index
      <el-menu-item v-if="!menu.alwaysShow" :index="indexShow(menu)" @click="tolink(menu)">
        <i class="iconfont menu-iconfont" :class="menu.meta.icon"></i>
        <span class="menu-title">{{ menu.meta.title }}</span>
      </el-menu-item>
    </template>

  </el-menu>
</template>

<script>
export default defineComponent({
  name: 'MenuList',
  setup() {
    const indexShow = (menu, child) => {
      const path = resolvePath(menu, child)
      return path
    }
	// menuList 菜单内容 自己定义
    // 拼接地址
    const resolvePath = (menu, child) => {
      let toJump = ''
      if(!menu.alwaysShow) {
        toJump = menu.path
      } else {
        toJump = menu.path + '/' + child.path
      }
      return toJump
    }
    const defaultMenu = computed(() => { return route.path })
    return {
      defaultMenu,
      indexShow
    }
  },
})
</script>

把el-menu组件的default-active属性设置成和el-menu-item标签的index属性一样即可

一般是设置成跳转地址，这样可以很容易的切换，效果图：