element 面包屑匹配规则

在Element UI中，你可以使用面包屑（Breadcrumb）组件来展示用户的导航路径。面包屑的匹配规则通常是根据当前路由的路径来生成。以下是一个示例的Element UI面包屑匹配规则：

<template>
  <el-breadcrumb separator="/">
    <!-- 面包屑的首页，一般是固定的 -->
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

    <!-- 根据当前路由路径动态生成面包屑项 -->
    <el-breadcrumb-item v-for="(crumb, index) in matchedCrumb" :key="index">
      {{ crumb.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  computed: {
    matchedCrumb() {
      const matched = this.$route.matched; // 获取当前路由匹配的路由记录数组
      const breadcrumbs = [];

      // 遍历匹配的路由记录，生成面包屑项
      for (const route of matched) {
        if (route.meta && route.meta.title) {
          breadcrumbs.push(route); // 将包含 meta.title 的路由记录添加到面包屑数组中
        }
      }

      return breadcrumbs;
    },
  },
};
</script>

在这个示例中，我们使用了Vue.js的计算属性来动态生成面包屑项。首先，我们获取了当前路由匹配的路由记录数组（this.$route.matched），然后遍历这个数组，查找每个路由记录是否包含一个meta.title属性。如果包含，就将这个路由记录添加到面包屑数组中。最后，我们在模板中使用v-for指令来渲染生成的面包屑项。

你可以根据你的路由配置和项目需求来自定义匹配规则，确保生成的面包屑项符合你的预期。这个示例中的匹配规则是基本的示例，你可以根据实际情况进行调整。