easydo-chengfa/src/layout/index.vue

<template>
	<header style="background: url('img/header_bg.png') no-repeat;background-size: 100% 100%;" class="adminui-header">
		<div class="adminui-header-left">
			<div class="logo-bar" @click="$router.push('/')">
				<img class="logo" src="img/menu_logo.png">
				<span>{{ $CONFIG.APP_NAME }}</span>
			</div>
		</div>
		<div class="adminui-header-right">
			<userbar></userbar>
		</div>
	</header>

	<section class="aminui-wrapper">
		<div v-if="!ismobile" :class="['aminui-side', menuIsCollapse && 'isCollapse']">
			<div class="adminui-side-scroll">
				<el-scrollbar>
					<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
						<NavMenu :navMenus="menu"></NavMenu>
					</el-menu>
				</el-scrollbar>
			</div>
			<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
				<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
				<template v-if="!menuIsCollapse">收起</template>
			</div>
		</div>
		<Side-m v-if="ismobile"></Side-m>
		<div class="aminui-body el-container">
			<div class="adminui-main" id="adminui-main">
				<router-view v-slot="{ Component }">
					<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
						<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
					</keep-alive>
				</router-view>
			</div>
		</div>
	</section>
</template>

<script>
	import SideM from "./components/sideM.vue";
	import NavMenu from "./components/NavMenu.vue";
	import userbar from "./components/userbar.vue";

	export default {
		name: "index",
		components: {
			SideM,
			NavMenu,
			userbar
		},
		data() {
			return {
				menu: [],
				active: ""
			}
		},
		computed:{
			ismobile() {
				return this.$store.state.global.ismobile;
			},

			menuIsCollapse() {
				return this.$store.state.global.menuIsCollapse;
			}
		},

		created() {
			this.onLayoutResize();
			window.addEventListener("resize", this.onLayoutResize);
			if (!this.$TOOL.data.get("USER_INFO")) {
				this.$TOOL.cookie.remove("TOKEN");
				return this.$router.replace({ path: "/login" });
			}
			this.menu = this.filterUrl(this.$TOOL.data.get("MENU"));
			this.showThis();
		},

		watch: {
			$route() {
				this.showThis();
			}
		},

		methods: {
			onLayoutResize() {
				this.$store.commit("SET_ismobile", document.body.clientWidth < 992);
			},

			// 路由监听高亮
			showThis() {
				this.$nextTick(()=> this.active = this.$route.fullPath);
				this.$store.commit("setRouteShow", true);
			},

			filterUrl(map) {
				let newMap = [];
				map && map.forEach(item => {
					item.meta = item.meta ? item.meta : {};
					// 处理隐藏
					if (item.hidden) return false;
					// 递归循环
					if (item.children && item.children.length > 0) item.children = this.filterUrl(item.children);
					newMap.push(item);
				});
				return newMap;
			}
		}
	}
</script>