Vue + ElementUI 动态生成面包屑导航教程

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <span v-if="!item.path">{{ item.meta.title }}</span>
      <router-link v-else :to="item.path">{{ item.meta.title }}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
 
<script>
export default {
  computed: {
    breadcrumbList() {
      let list = this.$route.matched.filter(item => item.meta && item.meta.title);
      list.push({ path: 'home', meta: { title: '首页' } }); // 假设首页的路由名称为'home'
      return list;
    }
  }
};
</script>

这段代码使用了Vue和ElementUI的<el-breadcrumb>组件来动态生成面包屑导航。它通过计算属性breadcrumbList来获取当前路由匹配的元信息，并生成面包屑导航项。如果当前路由项有路径，则创建可点击的链接；如果没有路径，则显示为文本。这个例子简洁明了，并且可以作为构建动态面包屑导航的参考。