vue3 权限菜单( 树形菜单)无限循环

权限管理

使用到vuex来管理用户状态信息，拦截判断登录状态，存储用户可访问菜单id

这个项目是根据后台返回的用户可访问的id来判断用户是否有权限来更改这个页面

首先看一下后台返回的数据格式，一维数组需要我们把数据进行排序递归成树状结构

 

使用递归算法动态渲染不定层级的菜单，生成树形结构

function menusHandler(data) {
	let menu = [];
	let map = {};
//乱序先进行排序
	data.sort((a, b) => a.parent_id - b.parent_id);
//利用对象的性质存储父节点与子节点的映射关系
	data.forEach(resource => {
		resource.children = [];
		map[resource.id] = resource;
		if (resource.parent_id == 0) {        // 0 是顶层数据
			resource.show = false;
			menu.push(resource);
		} else {
			if (map[resource.parent_id]) {
				resource.show = false;
				map[resource.parent_id].children.push(resource)
			} else {
				// throw new Error(`当前循环的数据parent_id=${resource.parent_id}有错误`);
			}
		}
	})
	console.log(menu);
	return menu
}

 建立一个自定义组件MenuItem

<template>
	<div class="menu">
		<ul class="back" v-for="(item,index) in data" :key="index">
			<li class="child" @click="goa(item.id,index,data)">{{item.name}}</li>
			<MenuItem v-if="item.show&&item.children" :data="item.children">  
			</MenuItem>
		</ul>
	</div>
</template>

<script>
	import {
		ref,
	} from "vue";
	export default {
		name: "MenuItem",
		props: {
			data: Object
		},
		setup(props, {emit}) {
			const even = ref('')
			function goa(e, l, data) {
				var one = sessionStorage.getItem('msd')
				var list = [];
				var add = [];
				var val = '';
				add = one.split(',');
				Array.prototype.contains = function(e) {
					for (var i = 0; i < add.length; i++) {
						if (add[i] == e) {
							return true;
						}
					}
					return false;
				}
				if (add.contains(e)) {
					if (data[l].show == false) {
						data[l].show = true
						val = '有权限'
					} else {
						data[l].show = false
					}
				} else {
					val = '没有权限'
				}
				even.value = val
				let param = {
					contents: even.value
				}
				emit('goa', param)
			}
			return {
				even,
				goa,
			}
		}

	}
</script>
<style>
	
</style>

在父组件中调用

<MenuItem :data="result" @goa="fun"></MenuItem>
{{even}}

import MenuItem from "../components/MenuItem.vue";  //引用子组件
export default {
	components:{
		MenuItem,
	},
	setup() {
        const even = ref('')
		function fun(val){        //接收子组件传过来的值
			even.value = val.contents
		}
}