当前位置：首页 > VUE

vue实现目录

2026-02-25 15:41:03VUE

Vue 实现目录的方法

在 Vue 中实现目录功能可以通过动态渲染、路由匹配或第三方库来完成。以下是几种常见的实现方式：

基于路由的目录生成

利用 Vue Router 的路由信息自动生成目录结构，适合文档类或单页应用。

<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.meta.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes.filter(r => r.meta && r.meta.title)
    }
  }
}
</script>

动态渲染目录组件

通过递归组件实现多级目录结构，适合复杂嵌套内容。

vue实现目录

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.title }}
      <directory-tree v-if="item.children" :items="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'DirectoryTree',
  props: ['items']
}
</script>

使用第三方库

Vue 生态中有专门处理目录的库，如 vue-toc 或 vue-scrollactive，可快速实现带滚动定位的目录。

安装示例：

vue实现目录

npm install vue-scrollactive

使用方式：

import VueScrollactive from 'vue-scrollactive'
Vue.use(VueScrollactive)

<template>
  <scrollactive>
    <a href="#section1" class="scrollactive-item">Section 1</a>
    <a href="#section2" class="scrollactive-item">Section 2</a>
  </scrollactive>
</template>

结合 Markdown 的目录提取

如果内容来自 Markdown，可使用 markdown-it 等工具提取标题生成目录：

const md = require('markdown-it')()
const headings = md.parse(content).filter(token => token.type === 'heading_open')

目录高亮与滚动定位

通过监听滚动事件实现当前目录项高亮：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const headings = document.querySelectorAll('h2, h3')
    headings.forEach((heading) => {
      const rect = heading.getBoundingClientRect()
      if (rect.top >= 0 && rect.top <= 200) {
        this.activeId = heading.id
      }
    })
  }
}

以上方法可根据具体需求组合使用，实现静态或动态的目录导航功能。对于复杂项目，建议采用状态管理（如 Vuex）来维护目录的展开/折叠状态。