vue3监听router4实现面包屑

vue2中监听的写法

watch(router,()=>{
  initbreadcrumbList();
},{deep:true,immediate:true})

vue3中监听的写法

watch(()=>router,()=>{
  initbreadcrumbList();
},{deep:true,immediate:true})

获取面包屑：

之前获取为：

router.matched 遍历输出还要获取父路径赋值

router4开始为：

router.currentRoute.value.matched 直接遍历输出即可

const initbreadcrumbList=()=>{
  breadcrumbList.value = router.currentRoute.value.matched;
}

页面代码

<el-breadcrumb separator="/">
  <el-breadcrumb-item v-for="(item,index) in breadcrumbList">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>