CZO_Boss/src/layout/components/Sidebar.vue

<template>
	<div class="has-logo">
		<logo />
		<div class="sidebar-box">
			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" :class="{ active: item.path == active }" @click="toMainMenu(item)">
				<item :icon="item.icon" :title="item.menuName" />
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Logo from './Sidebar/Logo'
import Item from './Sidebar/Item'

export default {
	components: { Logo, Item },
	data() {
		return {
			active: sessionStorage.getItem('sidebarActive') || 'index'
		}
	},
	computed: {
		...mapState(['settings']),
		...mapGetters(['sidebarRouters', 'sidebar']),
		isCollapse() {
			return !this.sidebar.opened
		}
	},
	methods: {
		toMainMenu(item) {
			if (this.$route.query.id == item.menuId) {
				return
			}
			this.active = item.path
			sessionStorage.setItem('sidebarActive', item.path)
			this.$router.replace({
				path: '/mainMenu',
				query: {
					id: item.menuId
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.sidebar-box {
	width: 100%;
	.sidebar-box-item {
		width: 100%;
		height: 49px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		line-height: 49px;
		cursor: pointer;
		user-select: none;
		border-bottom: 1px dashed #535559;
		&:hover {
			background-color: #535559;
		}
		&.active {
			background-color: #4c9898;
		}
	}
}
</style>