vue实现目录
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>动态渲染目录组件
通过递归组件实现多级目录结构，适合复杂嵌套内容。
<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，可快速实现带滚动定位的目录。
安装示例：
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）来维护目录的展开/折叠状态。
