当前位置：首页 > VUE

vue实现小说目录

2026-02-17 17:23:23VUE

Vue 实现小说目录功能

数据准备

小说目录通常是一个列表结构，可以通过数组形式存储章节信息。数据格式示例：

chapters: [
  { id: 1, title: "第一章 重生", content: "..." },
  { id: 2, title: "第二章 系统", content: "..." },
  // 更多章节...
]

目录列表渲染

使用 v-for 指令渲染目录列表，建议使用 <router-link> 实现章节跳转：

<ul class="chapter-list">
  <li v-for="chapter in chapters" :key="chapter.id">
    <router-link 
      :to="{ path: '/chapter', query: { id: chapter.id } }"
      @click="loadChapter(chapter.id)"
    >
      {{ chapter.title }}
    </router-link>
  </li>
</ul>

样式优化

为目录添加基础样式，增强可读性和交互性：

.chapter-list {
  padding: 0;
  list-style: none;
}
.chapter-list li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
.chapter-list a {
  color: #333;
  text-decoration: none;
}
.chapter-list a:hover {
  color: #42b983;
}

章节内容加载

通过点击事件或路由参数加载对应章节内容：

methods: {
  loadChapter(id) {
    const chapter = this.chapters.find(c => c.id === id);
    this.currentChapter = chapter;
    // 或通过API请求获取内容
  }
}

路由配置

配置 Vue Router 支持章节路由：

vue实现小说目录

const routes = [
  {
    path: '/chapter',
    component: ChapterView,
    props: route => ({ id: route.query.id })
  }
]

进阶功能

添加折叠/展开功能管理多卷小说
实现阅读进度标记
增加搜索功能快速定位章节
使用虚拟滚动优化长列表性能

完整组件示例

<template>
  <div class="novel-container">
    <div class="sidebar">
      <h3>目录</h3>
      <ul class="chapter-list">
        <li v-for="chapter in chapters" :key="chapter.id">
          <a 
            href="#" 
            @click.prevent="loadChapter(chapter.id)"
            :class="{ active: currentChapter?.id === chapter.id }"
          >
            {{ chapter.title }}
          </a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>{{ currentChapter?.title }}</h2>
      <p v-html="currentChapter?.content"></p>
    </div>
  </div>
</template>