vue2实现面包屑导航栏

在Vue 2中实现面包屑导航栏可以通过以下步骤完成：

1. 创建一个面包屑组件 `Breadcrumb.vue`：

<template>
  <nav class="breadcrumb">
    <ul>
      <li v-for="(crumb, index) in crumbs" :key="index" :class="{ active: index === crumbs.length - 1 }">
        <router-link :to="crumb.path">{{ crumb.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Breadcrumb',
  computed: {
    crumbs() {
      // 获取当前路由的路径
      const routePath = this.$route.path;
      
      // 分割路径为数组
      const pathSegments = routePath.split('/').filter(segment => segment !== '');
      
      // 构建面包屑导航数据
      const crumbs = pathSegments.map((segment, index) => {
        const path = `/${pathSegments.slice(0, index + 1).join('/')}`;
        return {
          path,
          label: segment
        };
      });
      
      return crumbs;
    }
  }
};
</script>

<style>
.breadcrumb {
  background-color: #f5f5f5;
  padding: 10px;
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  display: inline-block;
}

.breadcrumb li:not(:last-child):after {
  content: '/';
  margin: 0 5px;
}

.breadcrumb li.active {
  font-weight: bold;
}
</style>

2. 在需要使用面包屑导航栏的组件中引入并使用 `Breadcrumb` 组件：

<template>
  <div>
    <breadcrumb></breadcrumb>
    
    <!-- 其他组件内容 -->
  </div>
</template>

<script>
import Breadcrumb from './Breadcrumb.vue';

export default {
  name: 'YourComponent',
  components: {
    Breadcrumb
  }
};
</script>

上述代码中，面包屑导航栏会根据当前路由的路径动态生成面包屑导航数据，并且只有最后一个路径会被标记为活动状态。你可以根据需要自定义样式和路由配置。希望对你有所帮助！