一、效果

直接進入home頁面，直接展開對應的菜單項

二、具體實現

1、菜單容器增加默認選中變量

在菜單容器中將默認展開菜單default-openeds修改為默認選中菜單default-active

2、引入useRoute方法

引入該方法為了獲取當前頁面的路徑

import { useRoute } from 'vue-router'

3、獲取當頁面路徑，選中菜單項變量設置

通過route獲取到路徑信息，然后將其賦值給默認選中菜單項

//獲取當前頁面路徑
const route = useRoute();
const currentPath = route.path;
const activeMenu = ref(currentPath);

三、完整代碼

<template><el-container class="layout-container-demo" style="height: 100vh"><el-aside width="200px"><el-scrollbar><!-- default-openeds:默認展開菜單 --><!-- default-active:默認選中菜單 --><el-menu :default-active="activeMenu" :router="true"><!-- 遍歷一級菜單 --><template v-for="(item, index) in menu" :key="index"><!-- 如果一級菜單有子菜單，渲染 el-sub-menu --><el-sub-menu v-if="item.children && item.children.length > 0" :index="`${index + 1}`"><template #title><el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>{{ item.name }}</template><!-- 遍歷二級菜單 --><el-menu-item v-for="(secondmenu, secondindex) in item.children" :key="secondindex":index="secondmenu.path">{{ secondmenu.name }}</el-menu-item></el-sub-menu><!-- 如果一級菜單沒有子菜單，渲染 el-menu-item --><el-menu-item v-else :index="item.path"><el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>{{ item.name }}</el-menu-item></template></el-menu></el-scrollbar></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><div class="toolbar"><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header><!-- 右側內容 --><el-main><el-scrollbar><RouterView /></el-scrollbar></el-main><!-- 底部信息 --><el-footer class="flex flex-center"><span>@2025-2030 wen</span></el-footer></el-container></el-container>
</template><script setup>
import { ref,reactive } from 'vue'
import { useRoute } from 'vue-router'//獲取當前頁面路徑
const route = useRoute();
const currentPath = route.path;
const activeMenu = ref(currentPath);// 菜單
const menu = reactive([{name: 'Navigator One',icon: "message",path: '/about',},{name: 'Navigator Two',icon: "message",children: [{name: 'Option 1',path: '/home',},{name: 'Option 2',},{name: 'Option 3',},{name: 'Option 4',},]},
]);</script><style scoped>
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}.layout-container-demo .el-menu {border-right: none;
}.layout-container-demo .el-main {padding: 0;
}.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}
</style>