优化这段代码中面包屑导航栏点击目录会一直追加目录名称的bugtemplate div el-breadcrumb separator-class=el-icon-arrow-right el-breadcrumb-item v-for=item index in path key=index span click=pathClickindex itemname sp

优化面包屑导航栏点击目录会一直追加目录名称的bug的代码，可以在点击目录时，先判断当前目录是否已经存在于导航路径中，如果存在，则将其后面的目录都删除，然后再添加当前目录。修改后的代码如下：

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in path" :key="index">
        <span @click="pathClick(index)">{{ item.name }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-tree
      :data="folderData"
      :props="treeProps"
      node-key="id"
      :default-expanded-keys="expandedKeys"
      @node-click="folderClick"
      @node-dblclick="folderDblClick"
      :show-checkbox="false"
    >
    </el-tree>
    <el-row v-if="currentFolder !== null">
      <el-col :span="12">
        <h3>文件夹</h3>
        <el-button type="primary" @click="createFolder">新建文件夹</el-button>
        <!-- 文件夹列表 -->
        <el-table :data="currentFolder.folders" height="300">
          <el-table-column prop="name" label="名称"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h3>文件</h3>
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- 文件列表 -->
        <el-table :data="currentFolder.files" height="300">
          <el-table-column prop="name" label="名称"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟数据
      folderData: [
        {
          id: 1,
          name: "根目录",
          folders: [
            {
              id: 2,
              name: "子目录1",
              folders: [],
              files: [
                { id: 4, name: "文件1" },
                { id: 5, name: "文件2" }
              ]
            },
            {
              id: 3,
              name: "子目录2",
              folders: [],
              files: []
            }
          ],
          files: []
        }
      ],
      currentFolder: null, // 当前打开的文件夹
      path: [], // 导航路径
      expandedKeys: [1], // 默认展开的节点
      uploadUrl: "your_upload_url" // 文件上传接口
    }
  },
  computed: {
    treeProps() {
      return {
        children: "folders",
        label: "name"
      }
    }
  },
  methods: {
    // 点击导航路径
    pathClick(index) {
      this.path = this.path.slice(0, index + 1)
      this.currentFolder = this.path[index]
    },
    // 点击文件夹
    folderClick(data) {
      const index = this.path.findIndex(item => item.id === data.id)
      if (index !== -1) {
        this.path = this.path.slice(0, index + 1)
      } else {
        this.path.push(data)
      }
      this.currentFolder = data
    },
    // 双击文件夹
    folderDblClick(data) {
      const index = this.path.findIndex(item => item.id === data.id)
      if (index !== -1) {
        this.path = this.path.slice(0, index + 1)
      } else {
        this.path.push(data)
      }
      this.currentFolder = data
      this.expandedKeys.push(data.id)
    },
    // 返回上一级
    goBack() {
      this.path.pop()
      this.currentFolder = this.path[this.path.length - 1] || null
    },
    // 新建文件夹
    createFolder() {
      this.currentFolder.folders.push({
        id: new Date().getTime(),
        name: "新建文件夹",
        folders: [],
        files: []
      })
    },
    // 上传文件成功回调
    handleUploadSuccess(response) {
      // 处理上传成功的逻辑
    },
    // 上传文件失败回调
    handleUploadError() {
      // 处理上传失败的逻辑
    }
  }
}
</script>

修改的部分是在folderClick和folderDblClick方法中，先使用findIndex方法查找当前目录是否已经存在于导航路径中，如果存在，则将其后面的目录都删除，然后再添加当前目录。这样可以避免目录重复追加的问题