超精简 vue面包屑组件，利用router结构可生成无限级

1.组件内容

<template>
	<div class="breadcumb">
		<ul>
			<li v-for="(v, i) in data.list" :key="i" :class="i + 1 == data.list.length ? 'textactive' : 'text'">
				<span @click="todo(v, i)">{{ v.meta.title }}</span>
				<span v-if="i < data.list.length - 1"
					><el-icon><ArrowRight /></el-icon>
				</span>
			</li>
		</ul>
	</div>
</template>

<script setup name="bread">
import { ArrowRight } from '@element-plus/icons-vue';
const route = useRoute();
const router = useRouter();

const data = ref({
	list: [],
});

onMounted(() => {
	let matched = [...route.matched];
	data.value.list = unique(matched);
	console.log(data.value.list);
});

function todo(e, i) {
	if (data.value.lists.length == 2) {
		router.push(e.path);
	} else if (i != 0) {
		router.push(e.path);
	}
}

//去重
function unique(arr) {
	for (var i = 0; i < arr.length; i++) {
		for (var j = i + 1; j < arr.length; j++) {
			if (arr[i].meta.title == arr[j].meta.title) {
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}
</script>

<style lang="scss" scoped>
.text {
	font-size: 15px;
	font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
	font-weight: 400;
	text-align: LEFT;
	color: #b0b1b2 !important;
	line-height: 48px;
}

.textactive {
	font-size: 15px;
	font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
	font-weight: 400;
	text-align: LEFT;
	color: #616466 !important;
	line-height: 48px;
}

.breadcumb {
	display: flex;
	align-items: center;
	margin-left: 15px;
	span {
		cursor: pointer;
	}

	.el-icon-arrow-left {
		margin-right: 10px;
	}

	ul {
		display: flex;
		align-items: center;

		a {
			&:hover {
				cursor: pointer;
			}
		}
	}
}
</style>

2.路由结构

import homeindex from '@/views/layout/index.vue';
const routes = [
	{
		path: '/',
		name: 'index',
		redirect: '/home',
		meta: {
			title: '首页',
			isnav: false,
		},
	},

	{
		path: '/home',
		name: 'home',
		component: homeindex,
		redirect: '/home',
		meta: {
			title: '首页',
			isnav: true,
		},
		children: [
			{
				path: '/home',
				component: () => import('@/views/home/index.vue'),
				meta: {
					title: '首页',
					isnav: true,
				},
			},
		],
	},

	{
		path: '/adminmanage',
		name: 'adminmanage',
		component: homeindex,
		redirect: '/adminmanage',

		meta: {
			title: '局端用户管理',
			isnav: true,
			roles: ['admin'],
		},
		children: [
			{
				path: '/adminmanage',
				component: () => import('@/views/usermanage/admin.vue'),
				meta: {
					title: '局端用户管理',
					roles: ['admin'],
				},
			},
		],
	},

	{
		path: '/schoolmanage',
		name: 'schoolmanage',
		component: homeindex,
		redirect: '/schoolmanage',
		meta: {
			title: '校端用户管理',
			isnav: true,
			roles: ['school'],
		},
		children: [
			{
				path: '/schoolmanage',
				component: () => import('@/views/usermanage/school.vue'),
				meta: {
					title: '校端用户管理',
					isnav: true,
					roles: ['school'],
				},
			},
		],
	},

	{
		path: '/authmanage',
		name: 'authmanage',
		component: homeindex,
		redirect: '/authlist',
		meta: {
			title: '权限配置',
			isnav: true,
			roles: ['school', 'admin'],
		},
		children: [
			{
				path: '/authlist',
				component: () => import('@/views/authmanage/index.vue'),
				meta: {
					title: '权限类别',
					isnav: true,
					roles: ['school', 'admin'],
				},
			},
			{
				path: '/adminauth',
				component: () => import('@/views/authmanage/admin.vue'),
				meta: {
					title: '局端权限配置',
					isnav: true,
					roles: ['admin'],
				},
			},
			{
				path: '/schoolauth',
				component: () => import('@/views/authmanage/school.vue'),
				meta: {
					title: '校端权限配置',
					isnav: true,
					roles: ['school'],
				},
			},
		],
	},
];

export default routes;