nuxt3 实现 el-breadcrumb 面包屑导航

• 含有面包屑导航的组件

<template>
<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item :to="{ path: item.path }" :key="index" v-for=" (item, index) in breads">
		{{ item.title }}
	</el-breadcrumb-item>
</el-breadcrumb>
</template>

<script lang="ts">
const route = useRoute()

interface MenuItem {
    title: string,
    path: string
}
const breads = ref<Array<MenuItem>>()

watch(() => route.matched, (newVal, oldVal) => {
    breads.value = newVal.map((item) => {
        return { title: item.meta.title as string, path: item.path }
    })
},
    { immediate: true }
)
</script>

• 其他页面：definePageMeta：中定义的内容可以在 route.meta 中获取

<template>
    <div>
        <h1>登陆以后的主页</h1>
    </div>
</template>

<script lang="ts">
definePageMeta(
    { title: '主页' }
)
</script>