element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑

element-plus menu 设置default-active 页面刷新时 导航高亮

1、绑定default-active, index值为路由path （resourceUrl）

<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :router="true"
    @select="handleSelect"
  >
    <el-menu-item index="2dmap">首页</el-menu-item>
    <el-sub-menu :index="item.resourceUrl" v-for="item in menuResources" :key="item.resourceUrl">
      <template #title>{{item.resourceName}}</template>
      <el-menu-item v-for="route in item.menuChildren" :key='route.resourceUrl' :index="route.resourceUrl">{{route.resourceName}}</el-menu-item>
    </el-sub-menu>
    <el-menu-item></el-menu-item>
  </el-menu>

2、只需要在ref时把 $route.path绑定到响应数据源中，路由改变时切换高亮导航条，页面刷新时也会去获取 *自行动态改变activeIndex.value的值亲测无效

// setup
// 正确方式
const internalInstance = useCurrentInstance()
const activeIndex:Ref<string> = ref<string>(internalInstance.proxy.$route.path.split('/')[1])
// 错误方式
const activeIndex:Ref<string> = ref<string>('2dmap')
activeIndex.value = 'otherpath' //手动改变 无效

useCurrentInstance 方法

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance (): Record<string, any> {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties
  return {
    proxy
  }
}

补充

使用useRouter获取路由信息

import { useRouter } from 'vue-router'
// setup
const { currentRoute } = useRouter()
const activeIndex:Ref<string> = ref<string>(currentRoute.value.path.split('/')[1])