vue 面包屑导航代码

下面是一个简单的 Vue.js 面包屑导航组件的代码示例：

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

<script>
export default {
  computed: {
    crumbs() {
      const route = this.$route
      const paths = route.path.split('/').filter(p => p)
      const crumbs = []

      paths.forEach((path, index) => {
        const fullPath = paths.slice(0, index + 1).join('/')
        crumbs.push({ label: path, route: fullPath })
      })

      return crumbs
    }
  }
}
</script>

<style>
.breadcrumb {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

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

.breadcrumb li {
  display: inline-block;
  margin-right: 4px;
}

.breadcrumb li a {
  color: #428bca;
  text-decoration: none;
}

.breadcrumb li.active {
  color: #555;
}
</style>

这个组件使用 Vue 的计算属性来生成面包屑导航的数据。它假设路由的路径是由斜杠分隔的一系列路径部分组成的，并将每个路径部分转换为面包屑导航中的一个链接。每个链接都指向该路径的全路径，以便在单击面包屑导航时可以回到该路径。最后，面包屑导航使用 Bootstrap 样式进行渲染。