当前位置：首页 > VUE

vue实现目录

2026-02-09 10:28:09VUE

Vue 实现目录功能

在 Vue 中实现目录功能通常需要结合动态路由、组件递归或第三方库。以下是几种常见方法：

基于路由的目录结构

适用于需要与路由绑定的目录（如文档站点）：

// router.js
const routes = [
  {
    path: '/docs',
    component: DocsLayout,
    children: [
      { path: 'introduction', component: Introduction },
      { path: 'installation', component: Installation },
      {
        path: 'guides',
        children: [
          { path: 'getting-started', component: GettingStarted }
        ]
      }
    ]
  }
]

<!-- Sidebar.vue -->
<template>
  <ul>
    <li v-for="route in $router.options.routes" :key="route.path">
      <router-link :to="route.path">{{ route.name || route.path }}</router-link>
      <Sidebar v-if="route.children" :routes="route.children"/>
    </li>
  </ul>
</template>

递归组件实现树形目录

适用于嵌套层级不确定的目录结构：

<!-- TreeItem.vue -->
<template>
  <li>
    <div @click="toggle">{{ item.name }}</div>
    <ul v-if="hasChildren && isOpen">
      <TreeItem 
        v-for="child in item.children" 
        :key="child.id"
        :item="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeItem',
  props: ['item'],
  data() {
    return { isOpen: false }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

对于复杂目录结构，可以考虑以下库：

Vue Router：基础路由管理
Vuex：管理目录状态
Element UI/Tree：现成的树形组件
Vue Draggable：可拖拽目录

安装示例：

npm install element-ui

使用示例：

<template>
  <el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级目录',
        children: [{
          label: '二级目录'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

动态生成目录锚点

对于长文档的标题目录：

vue实现目录

<template>
  <div class="content" ref="content">
    <h2 v-for="(item, index) in headings" :id="'heading-'+index">
      {{ item.text }}
    </h2>

    <div class="toc">
      <a 
        v-for="(item, index) in headings" 
        :href="'#heading-'+index"
      >
        {{ item.text }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.headings = Array.from(this.$refs.content.querySelectorAll('h2'))
      .map(el => ({ text: el.innerText }))
  },
  data() {
    return { headings: [] }
  }
}
</script>