JZTXT

ElementPlus 面包屑组件（el-breadcrumb）自动定位 Vue Router 并渲染当前的位置

发布时间 2023-06-24 01:51:45作者: Himmelbleu
const route = useRoute();
const router = useRouter();
const breadcrumbList = shallowRef(getCurrentRoute());

function getCurrentRoute() {
  return router.currentRoute.value.matched;
}

watch(route, () => {
  breadcrumbList.value = getCurrentRoute();
});

<el-breadcrumb separator="/">
  <template v-for="(item, index) in breadcrumbList">
    <el-breadcrumb-item v-if="index != breadcrumbList.length - 1" :to="item.path">
      <span>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-else>
      <span>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </template>
</el-breadcrumb>