<template>
  <!-- 使用 Ant Design Vue 框架中的 a-breadcrumb 组件创建一个面包屑导航栏，为其添加 "breadcrumb" 类名，方便后续通过 CSS 对其样式进行定制化设置 -->
  <a-breadcrumb class="breadcrumb">
    <!-- 使用 v-for 指令循环遍历 breadList 数组中的每个元素（item）以及对应的索引（index），为每个元素创建一个 a-breadcrumb-item 组件，并且通过 :key 绑定每个元素的唯一标识（这里使用 item.name 作为唯一标识，用于 Vue 的虚拟 DOM 渲染优化，帮助 Vue 准确识别每个元素的变化情况） -->
    <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
      <!-- 使用 router-link 组件创建一个路由链接，只有当 item.name 不等于当前组件的 name 属性值并且索引 index 不等于 1 时才显示为路由链接（可能是为了排除特定的某个或某些面包屑项不做成可点击的链接形式）。通过 :to 属性绑定一个对象，根据 item.path 的值来设置链接的目标路径，如果 item.path 为空字符串则设置目标路径为根路径 '/'，否则使用 item.path 本身的值作为目标路径 -->
      <router-link
        v-if="item.name!= name && index!= 1"
        :to="{ path: item.path === ''? '/' : item.path }"
      >{{ item.meta.title }}</router-link>
      <!-- 当不满足上面 router-link 的显示条件时（即要么 item.name 等于当前组件的 name 属性值，要么索引 index 等于 1），则以普通的 <span> 元素形式显示该项面包屑的标题（item.meta.title），不具备路由跳转功能 -->
      <span v-else>{{ item.meta.title }}</span>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
  data () {
    return {
      // 定义一个名为 name 的空字符串属性，用于存储当前组件的名称或者某个用于判断面包屑显示逻辑的标识名称（从模板中的使用来看，和面包屑项是否显示为路由链接等判断相关），初始值为空，后续会在组件的生命周期等相关方法中进行赋值操作。
      name: '',
      // 定义一个空数组 breadList，用于存储面包屑导航栏中各个项的信息，每个元素应该是一个包含面包屑相关属性（如名称、路径、标题等）的对象，后续通过相关方法获取并填充数据到这个数组中，以展示具体的面包屑内容。
      breadList: []
    }
  },
  created () {
    // 在组件实例被创建完成后，立即调用 getBreadcrumb 方法，这个方法用于获取面包屑导航栏所需的数据，进行初始化面包屑列表的操作，确保面包屑在页面加载时就能正确显示相关内容。
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb () {
      // 先清空 breadList 数组，防止之前可能存在的数据残留，确保每次获取面包屑数据都是重新开始填充，避免数据混乱。
      this.breadList = [];
      // 以下这行代码被注释掉了，原本的功能可能是手动往 breadList 数组中添加一个固定的面包屑项，表示首页（包含名称为 'index'，路径为 '/dashboard/'，标题为 '首页' 的相关信息），具体是否添加以及添加什么样的固定首页项可能根据项目实际需求来决定。
      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})

      // 将当前路由的名称赋值给组件内部的 name 属性，可能用于后续在模板中判断面包屑项的显示逻辑（比如某些项是否要根据当前路由名称来决定是否显示为可点击的路由链接等情况）。
      this.name = this.$route.name;
      // 遍历当前路由匹配到的所有路由记录（$route.matched 是一个包含当前路由及其所有嵌套路由的路由记录数组），对于每个路由记录，执行以下操作（原本有条件判断 item.name!== 'index' 来决定是否添加，现在是直接添加所有路由记录到 breadList 数组中，意味着会把所有匹配的路由信息都作为面包屑项，不过可以根据实际情况调整这个添加逻辑）。
      this.$route.matched.forEach(item => {
        // item.name!== 'index' && this.breadList.push(item)
        this.breadList.push(item);
      });
    }
  },
  watch: {
    // 监听 $route 对象的变化（只要路由发生改变，比如用户点击链接跳转到其他页面、浏览器前进后退等操作导致路由切换时），就会触发这个监听器对应的回调函数，在这里回调函数就是再次调用 getBreadcrumb 方法，目的是重新获取并更新面包屑导航栏的数据，以保证面包屑能根据新的路由情况实时更新展示正确的内容。
    $route () {
      this.getBreadcrumb();
    }
  }
}
</script>

<style scoped>
</style>
