一、使用element-plus的菜单，侧边栏类型
导入element-plus，安装方式有如下几种：
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus在main.js引入和使用：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../src/assets/static/css/normalize.css'
import App from './App.vue'
import router from '../routers/router'
// 引入element-plus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
.use(ElementPlus)
.use(createPinia())
.mount('#app')我的实际运用代码：
<template>
<div class="container">
<!-- 菜单侧边栏 -->
<div class="bar">
<!-- 系统名称 -->
<div class="system-title">智慧物业管理平台</div>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
:default-active="mainStore.currentSelected"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
style="height: calc(100vh - 52px)"
router
>
<el-menu-item index="notice">
<el-icon><Bell /></el-icon>
<span>整改通知</span>
</el-menu-item>
<el-menu-item index="projectManagement">
<el-icon><Document /></el-icon>
<span>项目管理</span>
</el-menu-item>
<el-menu-item index="supplierManagement">
<el-icon><Shop /></el-icon>
<span>供应商管理</span>
</el-menu-item>
<el-sub-menu index="personnel" >
<!-- index属性用于指定子菜单的唯一标识符 -->
<template #title>
<el-icon><User /></el-icon>
<span>人事管理</span>
</template>
<el-menu-item index="personnelList">人员列表</el-menu-item>
<!-- <el-menu-item index="departmentManagement">部门管理</el-menu-item>
<el-menu-item index="postManagement">岗位管理</el-menu-item> -->
</el-sub-menu>
<el-menu-item index="dataManagement">
<el-icon><DataLine /></el-icon>
<span>数据管理</span>
</el-menu-item>
<el-menu-item index="roleManagement">
<el-icon><Avatar /></el-icon>
<span>角色管理</span>
</el-menu-item>
</el-menu>
</div>
<!-- 内容区域 -->
<div class="content">
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
</template>注意：这里的侧边栏用到了图标，如果不导入一下就会显示警告，为了让控制不显示乱七八糟的还是导入一下，不然看着也不舒服。
import {
Bell,
Document,
Shop,
User,
Avatar,
DataLine,
} from "@element-plus/icons-vue";因为我这里涉及到二级菜单，所以对应的路由是这样设计的。
import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";
import Notice from "../pages/Notice.vue";
import PersonnelList from "../pages/Personnel-list.vue";
import ProjectManagement from "../pages/Project-management.vue";
import RoleManagement from "../pages/Role-management.vue";
import SupplierManagement from "../pages/Supplier-management.vue";
import DataManagement from "../pages/Data-management.vue";
import DepartmentManagement from "../pages/Department-management.vue";
import PostManagement from "../pages/Post-management.vue";
import SendNotifications from "../pages/Send-notifications.vue";
import AddAssociatedItems from "../pages/AddAssociatedItems.vue";
import CreateProject from "../pages/Create-project.vue";
import ProjectSet from "../pages/Project-set.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
children: [
// 将默认路由重定向为notice页面
{
path: "/",
redirect: "/notice",
},
{
path: "/notice",
name: "notice",
component: Notice,
},
{
path: "/projectManagement",
name: "projectManagement",
component: ProjectManagement,
},
{
path: "/supplierManagement",
name: "supplierManagement",
component: SupplierManagement,
},
{
path: "/personnelList",
name: "personnelList",
component: PersonnelList,
},
{
path: "/departmentManagement",
name: "departmentManagement",
component: DepartmentManagement,
},
{
path: "/postManagement",
name: "postManagement",
component: PostManagement,
},
{
path: "/dataManagement",
name: "dataManagement",
component: DataManagement,
},
{
path: "/roleManagement",
name: "roleManagement",
component: RoleManagement,
},
],
},
{
path: "/notice/sendNotifications",
name: "sendNotifications",
component: SendNotifications,
},
{
path: "/notice/sendNotifications/addAssociatedItems",
name: "addAssociatedItems",
component: AddAssociatedItems,
},
{
path: "/projectManagement/createProject",
name: "createProject",
component: CreateProject,
},
{
path: "/projectManagement/projectSet",
name: "projectSet",
component: ProjectSet,
},
];
// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
history: createWebHistory(),
routes, // `routes: routes` 的缩写
});
export default router;
实际的样子（左边为侧边菜单栏，右边为切换菜单对应的页面内容）：
二、问题的解决
描述：当我点击左边侧边栏的时候，选中高亮能够选中，但是在浏览器上面点击左右回退，他的高亮就乱来了，比如我点击修改通知---->项目管理，然后点击上面浏览器的回退按钮，右边内容能够对应回退，但是高亮选中效果保留到了修改通知。默认是没有问题的，但是我再从修改通知---->项目管理---->修改通知，按道理来说，回退一步，应该回到项目管理，高亮也是，但是他高亮显示到了修改通知，产生了错乱。从修改通知---->项目管理---->创建项目按钮（进行创建项目页面），点击回退也还是回退到修改通知，应该是回到项目管理。如图：
采取解决方法：使用pinia管理当前选中状态（侧边栏选中高亮），通过窗口状态改变监听时间，配合页面路由的改变，来记录历史的路由，记录方式改为createWebHistory方式。具体如下：
安装pinia：
yarn add pinia
# 或者使用 npm
npm install pinia在main.js引入和use一下：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../src/assets/static/css/normalize.css'
import App from './App.vue'
import router from '../routers/router'
// 引入element-plus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
.use(ElementPlus)
.use(createPinia())
.mount('#app')新建一个stores的文件夹用于存放pinia相关的文件，并在下面创建一个main.js当作主仓库：
main.js代码：
默认状态是第一个菜单项，我这里是notice。
import { defineStore } from "pinia";
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const MainStore = defineStore("main", {
state: () => {
return {
// 用于记录当前选中的路由（当前选中的菜单项）
currentSelected: "notice",
};
},
getters: {},
actions: {},
});
在侧边栏页面使用这个状态：
import { useRouter, useRoute } from "vue-router";
import { MainStore } from "../src/stores/main";
import {
Bell,
Document,
Shop,
User,
Avatar,
DataLine,
} from "@element-plus/icons-vue";
const handleOpen = (key, keyPath) => {
};
const handleClose = (key, keyPath) => {
};
const router = useRouter();
const route = useRoute();
const mainStore = MainStore();
在app.vue里面写上窗口监听，监听路由的历史变化，来动态改变这个currentSelected当前选中的值，来让高亮效果对应显示：
<script setup>
import { MainStore } from './stores/main.js';
import { useRouter } from "vue-router";
const router = useRouter();
const mainStore = MainStore();
// 监听浏览器的历史记录变化
window.addEventListener('popstate', () => {
if(router.currentRoute.value.name){
mainStore.currentSelected = router.currentRoute.value.name
}
})
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>
我这里的home页面，包括菜单侧边栏和右边切换内容区域，完整代码：
<template>
<div class="container">
<!-- 菜单侧边栏 -->
<div class="bar">
<!-- 系统名称 -->
<div class="system-title">智慧物业管理平台</div>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
:default-active="mainStore.currentSelected"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
style="height: calc(100vh - 52px)"
router
>
<el-menu-item index="notice">
<el-icon><Bell /></el-icon>
<span>整改通知</span>
</el-menu-item>
<el-menu-item index="projectManagement">
<el-icon><Document /></el-icon>
<span>项目管理</span>
</el-menu-item>
<el-menu-item index="supplierManagement">
<el-icon><Shop /></el-icon>
<span>供应商管理</span>
</el-menu-item>
<el-sub-menu index="personnel" >
<!-- index属性用于指定子菜单的唯一标识符 -->
<template #title>
<el-icon><User /></el-icon>
<span>人事管理</span>
</template>
<el-menu-item index="personnelList">人员列表</el-menu-item>
<!-- <el-menu-item index="departmentManagement">部门管理</el-menu-item>
<el-menu-item index="postManagement">岗位管理</el-menu-item> -->
</el-sub-menu>
<el-menu-item index="dataManagement">
<el-icon><DataLine /></el-icon>
<span>数据管理</span>
</el-menu-item>
<el-menu-item index="roleManagement">
<el-icon><Avatar /></el-icon>
<span>角色管理</span>
</el-menu-item>
</el-menu>
</div>
<!-- 内容区域 -->
<div class="content">
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { MainStore } from "../src/stores/main";
import {
Bell,
Document,
Shop,
User,
Avatar,
DataLine,
} from "@element-plus/icons-vue";
const handleOpen = (key, keyPath) => {
};
const handleClose = (key, keyPath) => {
};
const router = useRouter();
const route = useRoute();
const mainStore = MainStore();
</script>
<style scoped>
.container {
display: flex;
justify-content: space-between;
}
.bar {
width: 200px;
/* height: 100vh; */
background-color: #545c64;
}
.system-title {
height: 50px;
line-height: 50px;
color: #fff;
text-align: center;
border-bottom: 2px solid #ccc;
background-color: #545c64;
}
.avatar {
width: 40px;
height: 40px;
background-color: aqua;
border-radius: 50%;
}
.admin-header {
display: flex;
align-items: center;
line-height: 50px;
height: 50px;
margin-left: 20px;
}
.content {
width: calc(100vw - 200px);
}
.main {
padding: 20px;
}
</style>
这样就解决了该问题。如有错误，欢迎指正！
5079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
