效果图:
简要说明:
切换第二个界面,第一个界面的侧边菜单也会高亮。这里是给大家提供一个思路,我的代码直接使用可能会出问题,只要是看最后js代码的处理。两个界面的default-active都是当前路由。
我使用的方法,在切换中间界面路由的时候,修改第一个界面指定menu的path。
侧边菜单:
<template>
<div class="common-aside">
<div class="top">
<div class="title">
<div class="logo">
<img class="item" src="@/assets/images/logo.png" />
</div>
<div class="logo-name">logo</div>
</div>
<div class="user">
<div class="user-avatar">
<img src="@/assets/images/avatar.png" />
</div>
<div class="user-name">
<span>{{ userData.name }}</span>
</div>
</div>
</div>
<div class="middle">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
text-color="RGB(59,163,254)"
background-color="RGB(37, 40, 48)"
@select="handleSelect"
>
<div v-for="(item, index) in menuData" :key="index">
<el-menu-item :index="item.path">
<el-icon><component :is="item.icon" /></el-icon>
<span>{{ item.menuName }}</span>
</el-menu-item>
</div>
</el-menu>
</div>
<div class="bottom"></div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { asideData } from "@/assets/js/data/menu";
const router = useRouter();
// 初始化数据
const userData = reactive({
avatar: "@/assets/images/avatar.png",
name: "小涂吃饭了没",
});
const menuData = reactive(asideData);
// 切换菜单的操作
const handleSelect = (key, keyPath) => {
router.push({ path: key });
};
</script>
<style src="@/assets/css/common/enter-login/common-aside.css" scoped>
</style>
css文件:
.common-aside {
position: fixed;
height: 100vh;
max-width: 160px;
background-color: RGB(37, 40, 48);
}
.title {
padding: 20px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
}
.title .logo img {
width: 30px;
height: 30px;
}
.title .logo-name {
margin-left: 10px;
font-size: 20px;
text-align: center;
box-sizing: border-box;
overflow: hidden;
color: aliceblue;
}
.user {
color: aliceblue;
padding: 20px;
}
.user-avatar img {
width: 70px;
height: 70px;
}
.user-name,
.user-avatar {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.el-menu {
margin: 0;
padding: 0;
border: 0;
}
.el-menu-item:hover,
.el-menu-item.is-active {
color: aliceblue !important;
background-color: black !important;
}
.el-menu .el-icon {
width: 40px;
height: 40px;
}
.el-menu-item span {
font-size: 16px;
text-overflow: ellipsis;
}
中间菜单:
<template>
<div class="personal-setting">
<div class="choose">
<div class="menu">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
text-color="RGB(65,74,96)"
@select="handleSelect"
>
<div v-for="(item, index) in menuData" :key="index">
<el-menu-item :index="item.allPath">
{{ item.menuName }}
</el-menu-item>
</div>
</el-menu>
</div>
<div class="content">
<router-view />
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { personalAsideData,changePersonalSettingPath } from "@/assets/js/data/menu";
const menuData = reactive(personalAsideData);
const router = useRouter();
const handleSelect = (key, keyPath) => {
// 这里跳转路由之后修改侧边菜单,个人设置的路径
changePersonalSettingPath(key,"个人设置");
router.push({ path: key });
};
</script>
<style scoped>
.personal-setting {
display: flex;
justify-content: center;
align-items: center;
}
.choose {
width: 97%;
background: #fff;
display: flex;
}
.menu {
width: 170px;
}
::v-deep .el-menu-item {
display: flex;
justify-content: center;
font-size: 17px;
}
.el-menu-item:hover,
.el-menu-item.is-active {
border-right: 1px solid RGB(64, 158, 255);
color: RGB(64, 158, 255);
background: #fff;
}
</style>
js代码:
import { reactive } from "vue";
// personal 菜单
const personalAsideData = reactive([
{
menuName: "个人设置",
path: "self",
allPath: "/personal-setting/self",
},
{
menuName: "安全设置",
path: "safe",
allPath: "/personal-setting/safe",
},
{
menuName: "公司设置",
path: "company",
allPath: "/personal-setting/company",
},
{
menuName: "团队成员",
path: "group",
allPath: "/personal-setting/group",
},
{
menuName: "简历邮箱",
path: "email",
allPath: "/personal-setting/email",
},
]);
// 侧边菜单
const asideData = reactive([
{
menuName: "首页管理",
path: "/home",
icon: "house",
},
{
menuName: "职位列表",
path: "/post",
icon: "guide",
},
{
menuName: "人才列表",
path: "/person",
icon: "avatar",
},
{
menuName: "面试安排",
path: "/interview",
icon: "school",
},
{
menuName: "报表中心",
path: "/report",
icon: "promotion",
},
{
menuName: "个人设置",
path: "/personal-setting/self",
icon: "user",
},
]);
// 在切换中间路由的时候,修改侧边菜单的path值
const changePersonalSettingPath = (path, menuName) => {
asideData.forEach((element) => {
if (element.menuName === menuName) {
element.path = path;
}
});
};
export { asideData, personalAsideData, changePersonalSettingPath };