111

src/layout/components/Sidebar.vue

@@ -2,7 +2,9 @@
 	<div class="has-logo">
 		<logo :collapse="isCollapse" />
 		<div class="sidebar-box">
-			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" @click="toMainMenu(item)">{{ item.menuName }}</div>
+			<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>
@@ -10,31 +12,29 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import Logo from './Sidebar/Logo'
-import variables from '@/assets/styles/variables.scss'
+import Item from './Sidebar/Item'
 
 export default {
-	components: { Logo },
+	components: { Logo, Item },
+	data() {
+		return {
+			active: sessionStorage.getItem('sidebarActive') || 'index'
+		}
+	},
 	computed: {
 		...mapState(['settings']),
 		...mapGetters(['sidebarRouters', 'sidebar']),
-		activeMenu() {
-			const route = this.$route
-			const { meta, path } = route
-			// if set path, the sidebar will highlight the path you set
-			if (meta.activeMenu) {
-				return meta.activeMenu
-			}
-			return path
-		},
-		variables() {
-			return variables
-		},
 		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: {
@@ -57,6 +57,7 @@ export default {
 		text-align: center;
 		line-height: 49px;
 		cursor: pointer;
+		user-select: none;
 		border-bottom: 1px dashed #535559;
 		&:hover {
 			background-color: #535559;

src/router/index.js

@@ -63,7 +63,7 @@ export const constantRoutes = [
 				path: 'index',
 				component: resolve => require(['@/views/index'], resolve),
 				name: 'Index',
-				meta: { title: '首页', icon: 'dashboard', affix: true }
+				meta: { title: '风险办公', icon: 'dashboard', affix: true }
 			}
 		]
 	},