vue在PC端定义一个列出所有菜单的页面

效果图

index.vue

<template>
	<div class="layout-padding">
		<div class="layout-padding-auto" style="background-color: #1e243a;">
			<el-row class="home">
				<el-col class="row-box" v-for="item in routerList" :key="item.name">
					<!-- 一级菜单 -->
					<div class="row-type">
						<div class="icon-box">
							<svgIcon
								:name="(item.children && item.children.length === 1) ? item.children[0].meta.icon : item?.meta.icon"
								size="30" color="#31fdfe"></svgIcon>
						</div>
						<div class="type-box">
							{{ item?.meta.title.substring(0, 2) }}
							<br>
							{{ item?.meta.title.substring(2, 4) }}
						</div>
					</div>
					<!-- 二级菜单 -->
					<el-row class="row-count">
						<el-col class="row-cell-box homePlateHoverStyle" v-for="cell in item.children"
							:key="cell.meta.title" @click="$router.push(cell.path)" :xs="24" :sm="12" :md="8" :lg="4"
							:title="cell.meta.title" v-show="!cell.meta.isHide">
							<div class="cell-icon">
								<svgIcon :name="cell?.meta.icon" size="50" color="#fff">
								</svgIcon>
							</div>
							<div class="cell-name">{{ cell?.meta.title }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, } from 'vue';
import { useRoutesList } from '/@/stores/routesList';
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";

export default defineComponent({
	setup() {
		// 页面加载时
		onMounted(() => {

		});
		const { routesList } = storeToRefs(useRoutesList());
		const { themeConfig } = storeToRefs(useThemeConfig());

		const data = reactive({
			locale: themeConfig.value.globalI18n,
			routerList: [] as any[],
		});


		onMounted(async () => {
			filterRoutesFun(routesList.value)
		});


		// 路由过滤递归函数
		const filterRoutesFun = (arr: any[]) => {
			let filterArr = arr.filter((item: any) => item.name !== 'home' && !item.meta.isHide)
			data.routerList = filterArr
			console.log("菜单数据=", data.routerList);
		};

		return {
			...toRefs(data),
		};
	},
});
</script>

<style scoped lang="scss">

.homePlateHoverStyle:hover {
  opacity: 0.9;
  -webkit-animation: animated-border 0.9s infinite;
  animation: animated-border 0.9s infinite;
}

@keyframes animated-border {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  100% {
    -webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
}


.home {
	overflow: auto;
	padding: 15px;

	.row-box {
		display: flex;
		color: #ffffff;

		// 一级菜单
		.row-type {
			min-width: 100px;
			height: 120px;
			background: #272d44;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon-box {
				margin-bottom: 5px;
			}

			.type-box {
				text-align: center;
				font-size: 16px;
				line-height: 22px;
				text-shadow: 1px 1px 10px #31fdfe;
			}
		}

		// 子菜单
		.row-count {
			flex: 1;
			display: flex;
			font-size: 16px;
			text-shadow: 1px 1px 10px #31fdfe;

			.row-cell-box {
				width: 200px;
				height: 120px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				border-radius: 8px;
				margin-left: 20px;
				margin-bottom: 20px;
				background: linear-gradient(360deg, #30c2db 0%, #567eeb 100%);

				&:nth-child(1) {
					background: linear-gradient(180deg, #309fe4 0%, #19c9bb 100%);
				}

				&:nth-child(2) {
					background: linear-gradient(360deg, #30c2db 0%, #567eeb 100%);
				}

				&:nth-child(3) {
					background: linear-gradient(180deg, #309fe4 0%, #19c9bb 100%);
				}

				&:nth-child(4) {
					background: linear-gradient(360deg, #30c2db 0%, #567eeb 100%);
				}

				&:nth-child(5) {
					background: linear-gradient(180deg, #624df2 0%, #a697fc 100%);
				}

				&:nth-child(6) {
					background: linear-gradient(180deg, #f8cc7d 0%, #f37d52 100%);
				}


				.cell-icon {}

				.cell-name {}
			}

		}
	}

}
</style>

菜单数据格式