Vue-cli實戰項目15 全局面包屑導航開發(二)

上一章節

Vue-cli實戰項目14全局面包屑導航開發

全局面包屑導航開發(二)

添加本地存儲，在刷新仍保持在原來頁面。
第一步、將當前頂部Index和側邊index保存到本地

第二步、在刷新後，執行初始化操作，調用_initNavBar方法將本地保存的頂部Index和側邊index重新加載

完整代碼

<template>
	<div>
		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;overflow: hidden;">
			<el-header class="d-flex align-items-center" style="background: #545c64;">
				<!-- -->
				<a class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
				<!-- 頂部導航欄 -->
				<el-menu :default-active="navBar.active" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
					<el-menu-item :index="index|numToString" v-for="(item,index) in navBar.list" :key="index">
						{{item.name}}
					</el-menu-item>
					<el-submenu index="100">
						<template slot="title">
							<!-- 頭像 -->
							<el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
							</el-avatar>
							silas
						</template>
						<el-menu-item index="100-1">修改</el-menu-item>
						<el-menu-item index="100-2">退出</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-header>
			<el-container style="height: 100%;">
				<!-- 側邊佈局 -->
				<el-aside width="200px">
					<el-menu :default-active="slideMenuActive" @select="asideSelect" style="height: 100%;">
						<el-menu-item :index="index|numToString" v-for="(item,index) in slideMenus" :key="index">
							<i :class="item.icon"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 主佈局 -->
				<el-main>
					<!-- 麪包屑導航 -->
					<div class="border-bottom mb-3" style="padding: 20px;margin: -20px;" v-if="bran.length>0">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: item.path }" v-for="(item,index) in bran" :key="index">
								{{item.title}}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<!-- 主內容 -->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import common from '@/common/mixins/common.js';
	export default {
		mixins: [common],
		data() {
			return {
				navBar: [],
				bran: []
			};
		},
		created() {
			//初始化菜單
			this.navBar = this.$conf.navBar;
			//初始化麪包屑導航
			this.getRouterBran();
			//初始化選中菜單
			this._initNavBar();
		},
		watch: {
			'$route'(to, from) { //監聽器，跳轉頁面時觸發
				//本地存儲
				localStorage.setItem('navActive', JSON.stringify({
					top: this.navBar.active,
					left: this.slideMenuActive
				}))
				//重新加載麪包屑導航欄
				this.getRouterBran();
			}
		},
		computed: {
			slideMenuActive: {
				get() {
					return this.navBar.list[this.navBar.active].subActive || '0'
				},
				set(val) {
					this.navBar.list[this.navBar.active].subActive = val
				}
			},
			slideMenus() {
				return this.navBar.list[this.navBar.active].submenu || [];
			}
		},
		methods: {
			_initNavBar() {
				//
				let r = localStorage.getItem('navActive');
				if(r){
					r = JSON.parse(r);
					this.navBar.active = r.top;
					this.slideMenuActive = r.left;
				}
			},
			//獲取麪包屑導航
			getRouterBran() {
				//過濾，有name值的才保留 
				let b = this.$route.matched.filter(v => v.name);
				let arr = [];
				b.forEach((v, k) => {
					//過濾 layout和index
					if (v.name == 'layout' || v.name == 'index') return;
					arr.push({
						name: v.name,
						path: v.path,
						title: v.meta.title
					})
				})
				//追加首頁
				if (arr.length > 0) {
					arr.unshift({
						name: "index",
						path: "/index",
						title: "後臺首頁"
					})
				}
				//保存到麪包屑數組
				this.bran = arr;
			},
			handleSelect(key, keyPath) {
				this.navBar.active = key;
				//跳轉到當前激活的頁面
				this.$router.push({
					name: this.slideMenus[this.slideMenuActive].pathname
				});
			},
			asideSelect(key, keyPath) {
				this.slideMenuActive = key
				//跳轉到指定頁面
				this.$router.push({
					name: this.slideMenus[key].pathname
				});
			}
		}
	}
</script>

<style>

</style>

下一章節