vue前端根据后台返回的数据实现动态面包屑（使用递归）

Posted 2023-02-18 龖龖龖

vue前端根据后台返回的数据实现动态面包屑（使用递归）

<el-breadcrumb separator-class="el-icon-arrow-right">
  //<el-breadcrumb-item :to=" path: '/' ">首页</el-breadcrumb-item>
  <transition-group name="breadcrumb">
	  <el-breadcrumb-item 
	  	v-for="(item,index) in levelList" 
	  	:key="item.path"
	  	>
			<span 
			v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
			class="no-redirect"
			>
			item.meta.title
			</span>
			<a v-else @click.prevent="handleLink(item)">item.meta.title</a>
		</el-breadcrumb-item>
	</transition-group>
</el-breadcrumb>

<script>
export default 
	data() 
		return 
			levelList:[path:"/index",meta:title:"首页"]
		
	,
	watch:
		$route(route) 
			if(route.path.startsWith) 
				return;
			
			this.getBreadcrumb();
		
	
	created()
		this.getBreadcrumb();
	,
	methods:
		getComponentList(menus,list) 
		if(!menus) return;
			for(let i = 0; i < menus.length; i++) 
				list.push(menus[i]);
				if(menus[i].path == this.$route.path)
					if(list) return list;
				
				if(menus[i].children.length > 0)
					let flag =  this.getComponentList(menus[i].children,list);
					if(flag) return flag;
				
				list.pop();
			
			//return [];
		,
		getBreadcrumb()
			var list = [];
			let matched = [];
			//bannerList 为后台返回的导航集合数据（存储方式不仅限于sessionStorage）
			let bannerList = JSON.parse(sessionStorage.getItem("BannerList"));
			list = this.getComponentList(bannerList,list);
			let first = matched.concat(list);
			if(!this.isDashboard(first)) 
				matched = [path:"/index",meta:title:"首页"].concat(first)
			
			this.levelList = matched.filter((item)=>
				if(item)
					return item
				
			)
		,
		isDashboard(route) 
			const name = route && (route.name || route.menuName);
			if(!name) 
				return false;
			
			return name.trim() === "首页";
		,
		handleLink(item) 
			const redirect,path = item;
			if(redirect)
				this.$router.push(redirect);
				return;
			
			this.$router.push(path);
		
	

</script>
<style lang="scss" scoped>
	.app-breadcrumb .el-breadcrumb
		display:inline-block;
		font-size:14px;
		line-height:50px;
		margin-left:8px;
		.no-redirect 
			color:#97a8be;
			cursor:text;
		
	
</style>