Vue3 + Ts+ElementPlus封装一个面包屑导航组件

1.建立一个面包屑导航组件  /components/BreadCrumb.vue

<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { RouteLocationNormalizedLoaded } from 'vue-router';
import { useRouter } from 'vue-router';

// 获取路由信息
const { currentRoute } = useRouter();

// 定义面包屑数据
const breadcrumbItems = ref<RouteLocationNormalizedLoaded['matched']>([]);

// 监听当前路由变化
watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    // route.matched 保存着路由记录，包含任何已被加载并在 components 对象内被替换掉的懒加载组件
    // meta是定义的路由里面的meta属性，可以自定义
    breadcrumbItems.value = route.matched.filter(r => r.meta && r.meta.title);
    console.log(currentRoute.value);
  },
  { immediate: true }
);
</script>

<template>
  <div class="bread-container">
    <el-breadcrumb separator=">">
        <el-breadcrumb-item
          v-for="item in breadcrumbItems"
          :key="item.path"
          :to="{ path: item.path }"
          class="breadcrumb-item"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style lang="scss">
.bread-container {
  padding: 25px 0;
}
</style>

2. /router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Layout/Layout.vue'),
      meta: {
        title: '分类'
      },
      children: [
        {
          path: '',
          component: () => import('@/views/Home/Home.vue'),
          meta: {
            title: '首页'
          }
        },
        {
          path: 'category',
          component: () => import('@/views/Category/Category.vue'),
          meta: {
            title: '分类'
          }
        },
      ]
    },
    {
      path: '/login',
      component: () => import('@/views/Login/Login.vue'),
      meta: {
          title: '登录'
      }
    }
  ],
})

export default router