【Element Plus】Menu组件：url访问页面时高亮对应菜单栏

场景

使用Element Plus的Menu 菜单 | Element Plus时，点击对应菜单会显示对应路由，此时会高亮选中菜单栏。但输入url访问对应路径，菜单栏不会默认高亮。

需求：url访问页面时高亮对应菜单栏。

代码

router：

import { createRouter, createWebHistory } from 'vue-router'export const routes = [{path: '',title: '功能Demo',// 父组件的component中要有<router-view></router-view>才会渲染子组件。实际上我们并不需要这个父组件children: [{path: '/shopping-link',name: 'shoppingLink',title: '复制链接弹出信息',component: () => import('@/views/shoppingLink.vue'),},],},
]const router = createRouter({history: createWebHistory(),routes: routes,
})export default router

Menu:

<template><div class="menu"><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"text-color="#fff":router="true"><el-sub-menu v-for="item in routes" :index="item.path"><template #title>{{ item.title }}</template><el-menu-item v-for="i in item.children" :index="i.path" :route="i.path" :key="i.path">{{ i.title }}</el-menu-item></el-sub-menu></el-menu></div>
</template>
<script lang="ts" setup>
import { routes } from '@/router/index'</script><style lang="less" scoped>
.menu {width: 200px;height: 100%;background-color: #545c64;.el-menu {border: none;}
}
</style>

解决

Menu API：default-active
default-active可以设置默认高亮的菜单。当default-active的值匹配上el-menu-item的index时，对应el-menu-item会高亮。

我们这里菜单el-menu-item的index是路径，因此：进入页面时，获取路径，赋值给default-active即可。

    <el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"text-color="#fff":default-active="activePath" :router="true">

import { ref, onMounted } from 'vue'
const activePath = ref('')// 默认高亮
const getPath = () => {const path = location.pathnameactivePath.value = path
}onMounted(() => {getPath()
})