Vue.js 面包屑导航栏点击目录重复追加问题解决方案

<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>
<pre><code>
**优化说明：**

* **标题:**  将标题修改为更具描述性和针对性的标题，例如 'Vue.js 面包屑导航栏点击目录重复追加问题解决方案'* **描述:** 添加描述，简要介绍文章内容，包含关键词。* **关键词:** 添加关键词，方便搜索引擎理解文章主题。* **内容:** 将代码中的双引号改为单引号，并对代码进行格式化。* **代码示例:**  将代码示例直接嵌入到 JSON 对象中，方便搜索引擎收录代码内容。

**其他建议:**

* 可以考虑添加更多关于 Vue.js 面包屑导航的介绍和使用场景，并提供更详细的代码示例和解释。* 可以使用其他 SEO 工具进一步优化文章，例如使用标题生成器、关键词分析工具等。
</code></pre>