最近使用若依框架开发项目,ruoyi的菜单管理根据权限分成了目录,菜单,按钮三种粒度,目录和菜单的区别是,目录自身没有路由,由子菜单进行路由。所以点击目录无法跳转页面,有这样一个需求,当点击一级目录的时候, 页面要发生跳转,并且在跳转的同时在左侧菜单栏中打开与之对应模块的二级菜单,实现目录与菜单的联动。
如下图:当点击系统管理时,默认打开系统管理目录下面的用户管理菜单,并跳转页面
实现方法:
1、在项目中找到顶部菜单所在的位置上,给目录绑定点击事件,获取当前目录及目录下的二级菜单列表(注:更多菜单里面的目录也要绑定点击事件)
<template>
<el-menu
:default-active="activeMenu"
mode="horizontal"
@select="handleSelect"
>
<!-- 顶部菜单绑定click事件 -->
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" @click="clickItem(item)" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
</template>
<!-- 顶部菜单超出数量折叠 -->
<el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
<template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item
:index="item.path"
:key="index"
@click="clickItem(item)"
v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
</template>
</el-submenu>
</el-menu>
</template>
export default {
data() {
return {
pathName:'',//主目录
pathChildren:[],//目录下二级菜单列表
// 顶部栏初始数
visibleNumber: 5,
// 当前激活菜单的 index
currentIndex: undefined
};
},
methods: {
//目录点击事件
clickItem(obj){
this.pathChildren = []
this.pathChildren = [...obj.children]
this.pathName = obj.path
}
}
}
2、写一个监听,监听目录的变化,打开目录相对应的菜单项,通过this.$router.push(),实现一级目录与二级菜单的联动。
watch: {
//监听目录
'pathName': function (newVal) {
if (this.pathChildren && this.pathChildren.length > 0) {
this.$router.push({path:this.pathChildren[0].path,});
}
},
},