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

在父组件中调用

{{even}}

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