模块

面包屑

src/layout/components/Breadcrumb.vue

 1<template>
 2  <el-breadcrumb separator="/">
 3    <el-breadcrumb-item
 4      v-for="item in routers"
 5      :key="item.path"
 6      :to="{ path: item?.path }"
 7      >{{ item?.meta?.title || "--" }}</el-breadcrumb-item
 8    >
 9  </el-breadcrumb>
10</template>
11<script setup lang="ts">
12import { useRouter } from "vue-router";
13import { computed } from "vue";
14// 处理点击事件
15const router = useRouter();
16// 当前路由的匹配记录
17console.log(router.currentRoute.value.matched);
18const routers = computed(() => {
19  // 过滤掉没有meta的
20  return router.currentRoute.value.matched.filter(
21    (item) => item.meta.title || null
22  );
23});
24</script>

TagsView

发布日期:2000-03-05 01:52 字数:77 用时 1分钟
tags:vue