首先设置一个动态的path
:default-active="path"
下面的菜单栏中 添加
<el-menu-item index="/user">用户管理</el-menu-item><el-menu-item index="/book">书籍管理</el-menu-item>index="/" 我要去的路径 记得加”/”
最后在方法中做一个返回即可
data(){
return{
path: this.$route.path //设置默认菜单高亮
}
}
代码
<template>
<div>
<el-menu
style="width: 200px;min-height: calc(100vh - 50px)"
:default-active="path"
router
class="el-menu-vertical-demo"
>
<el-sub-menu index="1">
<template #title>管理系统
</template>
<!-- <el-menu-item-group title="系统管理">-->
<el-menu-item index="/user">用户管理</el-menu-item>
<!-- <el-menu-item index="1-2">item two</el-menu-item>-->
<!-- </el-menu-item-group>-->
</el-sub-menu>
<el-menu-item index="/book">书籍管理</el-menu-item>
<!-- <el-menu-item-group title="Group Two">-->
<!-- <el-menu-item index="1-3">item three</el-menu-item>-->
<!-- </el-menu-item-group>-->
<!-- <el-sub-menu index="1-4">-->
<!-- <template #title>item four</template>-->
<!-- <el-menu-item index="1-4-1">item one</el-menu-item>-->
<!-- </el-sub-menu>-->
<!-- <el-menu-item index="2">-->
<!-- <el-icon><icon-menu /></el-icon>-->
<!-- <span>Navigator Two</span>-->
<!-- </el-menu-item>-->
<!--<!– disable 可读–>-->
<!-- <el-menu-item index="3" disabled>-->
<!-- <el-icon><document /></el-icon>-->
<!-- <span>Navigator Three</span>-->
<!-- </el-menu-item>-->
<!-- <el-menu-item index="4">-->
<!-- <el-icon><setting /></el-icon>-->
<!-- <span>Navigator Four</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside",
data(){
return{
path: this.$route.path //设置默认菜单高亮
}
}
}
</script>
<style scoped>
</style>
效果图


本文展示了如何在Vue.js中创建一个动态菜单,根据当前路由设置默认激活项,实现菜单高亮。通过设置`default-active`属性为`$route.path`,并结合`<el-menu-item>`和`<el-sub-menu>`组件,可以创建一个多级菜单,并在用户导航时自动突出显示当前页面对应的菜单项。此外,还提供了示例代码帮助理解实现过程。
1591

被折叠的 条评论
为什么被折叠?



