vue-router4面包屑制作方法

vue从2.0升级到3.0之后，因为路由的些许变化，面包屑制作方法也和之前有所不同。

breadcrumb.vue

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const breadcrumbList = ref([]);
const $router = useRouter();
function updateCamp() {
  breadcrumbList.value = $router.currentRoute.value.matched;
}
onMounted(() => {
  updateCamp();
});
watch(
  () => $router,
  () => {
    updateCamp();
  },
  { deep: true, immediate: true }
);
</script>
<template>
  <div>
    <div class="wrap">
      <div class="breadcrumb-wrap">
        <el-breadcrumb>
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="index"
            >{{ item.meta.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.wrap {
  padding: 0;
  .breadcrumb-wrap {
    padding: 5px 0 0 0;
  }
}
</style>