vue3封装面包屑导航

### 封装 Vue3 中的面包屑导航组件 #### 使用 Composition API 和 TypeScript 实现面包屑组件 为了创建一个高效的面包屑导航组件，在 `mounted` 钩子函数中调用 `generateBreadcrumb` 方法，可以在组件初始化时生成面包屑导航的功能[^1]。 定义面包屑项接口： ```typescript interface BreadcrumbItem { path: string; name?: string | undefined; } ``` 编写 `useBreadcrumb` 自定义 Hook 函数来处理逻辑部分： ```typescript import { ref, watch } from 'vue'; import { useRoute, useRouter } from 'vue-router'; export function useBreadcrumb() { const route = useRoute(); const router = useRouter(); let breadcrumbs = ref<BreadcrumbItem[]>([]); const generateBreadcrumb = () => { // 清除之前的路径数据 breadcrumbs.value.length = 0; // 获取匹配到的路由记录数组 const matchedRoutes = route.matched.filter(item => item.meta && item.meta.title); for (let i = 0; i < matchedRoutes.length; i++) { const routeRecord = matchedRoutes[i]; // 如果不是首页，则添加分隔符链接 if(i !== 0){ breadcrumbs.value.push({ path: '', name: '/' }); } // 添加当前页面对应的面包屑条目 breadcrumbs.value.push({ path: routeRecord.path, name: routeRecord.meta?.title as string }); } }; // 当前路由变化时重新计算面包屑列表 watch(() => route.fullPath, generateBreadcrumb); return { breadcrumbs, generateBreadcrumb }; } ``` 在模板文件里渲染这些信息： ```html <template> <div class="breadcrumb"> <el-breadcrumb separator="/"> <!-- 循环遍历 breadcrumb 数组 --> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; import { useBreadcrumb } from './hooks/useBreadcrumb'; export default defineComponent({ setup() { const { breadcrumbs, generateBreadcrumb } = useBreadcrumb(); onMounted(generateBreadcrumb); // 页面加载完成后执行一次 return { breadcrumbs }; }, }); </script> ``` 此代码片段展示了如何利用 Vue Router 提供的信息构建动态更新的面包屑导航栏。通过监听路由的变化并相应调整显示的内容，确保用户始终能够看到最新的位置指示器[^2]。