你能用vue手写一个面包屑

当然可以，以下是一个使用 Vue.js 实现面包屑导航的示例代码：

<template>
  <nav class="breadcrumb">
    <a href="#" class="breadcrumb-item" v-for="(item, index) in breadcrumbItems" :key="index">{{ item }}</a>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbItems: [], // 存储面包屑导航项的数组
    };
  },
  mounted() {
    // 获取当前路由的路径名称
    const path = this.$route.path;
    // 将路径名称拆分成数组
    const pathArr = path.split('/');
    // 依次将路径名称添加到面包屑导航项数组中
    let currentPath = '';
    pathArr.forEach(item => {
      if (item) {
        currentPath += '/' + item;
        this.breadcrumbItems.push({
          path: currentPath,
          name: item,
        });
      }
    });
  },
};
</script>

<style>
.breadcrumb {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 4px;
}
.breadcrumb-item {
  color: #333;
  text-decoration: none;
  padding-right: 5px;
}
.breadcrumb-item:hover {
  text-decoration: underline;
}
</style>

在上述代码中，我们通过获取当前路由的路径名称，将其拆分成数组，然后依次将路径名称添加到面包屑导航项数组中。最后，我们在模板中使用 `v-for` 指令将面包屑导航项渲染出来。