vue3 制作面包屑导航

在vue3中，面包屑导航的制作方法

//准备好路由信息
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        name:'index',
        meta:{
            title:'首页'
        },
        component:()=>import('../pages/index.vue'),
        children:[
            {
                path:'nav',
                name:'nav',
                component:()=>import('../components/nav.vue'),
                meta:{
                    title:'nav'
                },
                children:[
                    {
                        path:'test',
                        name:'test',
                        component:()=>import('../components/test.vue'),
                        meta:{
                            title:'test'
                        }
                    },
                    {
                        path:'test2',
                        name:'test2',
                        component:()=>import('../components/test2.vue'),
                        meta:{
                            title:'test2'
                        }
                    }
                ]
            }
        ]
    }
]

在首页引用：

//template
<el-breadcrumb>
   <el-breadcrumb-item
   v-for="item in list" 
   :key="item.path"
   >
   <router-link 
   :to="{ path: item.path }"
   >
   >{{ item.meta.title }}
   ></router-link>
   </el-breadcrumb-item>
   </el-breadcrumb>
//js
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const router = useRoute()
let list = computed(() => {
    return router.matched
})

记录一下。