vue3:十一、主页面布局(进入指定菜单页面，默认锁定到左侧菜单)

一、效果

直接进入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>