vue如何实现目录组件
实现目录组件的核心思路
在Vue中实现目录组件通常需要结合路由和动态渲染技术。核心思路是根据路由配置或页面结构动态生成目录树，并通过递归组件或循环渲染展示层级关系。
基于路由的目录实现
安装vue-router后，可以通过遍历路由配置生成目录结构：
<template>
<div class="menu-container">
<div v-for="route in routes" :key="route.path">
<router-link :to="route.path">{{ route.meta.title }}</router-link>
<template v-if="route.children">
<div v-for="child in route.children" :key="child.path">
<router-link :to="child.path">- {{ child.meta.title }}</router-link>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
computed: {
routes() {
return this.$router.options.routes.filter(r => r.meta?.showInMenu)
}
}
}
</script>递归组件实现多级目录
对于多级嵌套的目录结构，可以使用递归组件：
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.name }}
<tree-menu v-if="item.children" :treeData="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeMenu',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>基于DOM结构的目录生成
如果需要根据页面内容自动生成目录（如h2/h3标题）：
<template>
<div class="toc">
<div v-for="heading in headings" :key="heading.id">
<a :href="`#${heading.id}`">{{ heading.text }}</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
headings: []
}
},
mounted() {
this.headings = Array.from(document.querySelectorAll('h2, h3'))
.map(el => ({
id: el.id,
text: el.textContent,
level: parseInt(el.tagName.substring(1))
}))
}
}
</script>动态高亮当前目录项
添加滚动监听实现当前目录项高亮：
methods: {
handleScroll() {
const sections = document.querySelectorAll('h2, h3')
sections.forEach(section => {
const rect = section.getBoundingClientRect()
if (rect.top >= 0 && rect.top <= 200) {
this.activeId = section.id
}
})
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
}样式优化建议
为目录组件添加基础样式提升用户体验：
.toc {
position: fixed;
right: 20px;
top: 100px;
max-width: 250px;
padding: 10px;
border-left: 2px solid #eee;
}
.toc a {
display: block;
padding: 4px 0;
color: #666;
}
.toc a:hover {
color: #1890ff;
}
.toc .active {
color: #1890ff;
font-weight: bold;
}
