Vue3 给页面添加面包屑

一、封装面包屑组件

<template>
  <el-breadcrumb :separator-icon="ArrowRight" v-if="routes.length" class="breadcrumb-items">
    <el-breadcrumb-item
      v-for="route in routes"
      :key="route.name"
      :to="route.path"
      :class="{ 'active-title': route.name == activeTitle }"
    >
      {{ route.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { defineProps, PropType, computed } from "vue";
import { RouteRecordRaw } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  routes: {
    type: Array as PropType<RouteRecordRaw[]>,
    default: () => []
  },
  activeTitle: {
    type: String,
    default: ""
  }
});

const routes = computed(() => props.routes);
const activeTitle = computed(() => props.activeTitle);
</script>
<style scoped lang="less">
.breadcrumb-items {
  margin: 0px 0px 10px 0px;
  .active-title {
    font-size: 24px;
  }
}
</style>

二、使用面包屑组件

    <template #viewer>
      <breadcrumb :routes="routes" :active-title="options.defaultActive"></breadcrumb>
      <router-view></router-view>
    </template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();

const routes = computed(() => {
  return route.matched;
});
</script>