Vue中基于路由对象实现嵌套菜单的问题求助

我仔细看了你的代码，发现子菜单无法渲染的核心问题是没有正确遍历对象类型的路由数据——ROUTES.chapters和每个章节下的sections都是键值对对象（而非数组），直接用v-for遍历的话需要先把它们转换成数组，才能正常渲染列表。下面是具体的修复方案：

问题拆解 #

1. $ROUTES.chapters是以chapter1、chapter2为键的对象，不是数组，你当前的v-for写法虽然能拿到对象的值，但逻辑容易混淆，更稳妥的方式是转成数组遍历。
2. 每个章节下的sections同样是对象集合，你直接访问chapter.sections.label只会拿到sections对象本身，而非里面的每个小节数据，所以子列表根本无法渲染。

修复后的完整代码 #

Template 部分 #

<template>
  <ol>
    <!-- 将chapters对象转为数组，遍历每个章节 -->
    <li v-for="chapter in Object.values($ROUTES.chapters)" :key="chapter.label">
      <!-- 修正章节跳转路径，指向当前章节首页而非首页 -->
      <nuxt-link :to="localePath(chapter.path)">{{ chapter.label }}</nuxt-link>
      <!-- 将当前章节的sections转为数组，遍历所有小节 -->
      <ol>
        <li v-for="section in Object.values(chapter.sections)" :key="section.label">
          <!-- 拼接章节路径与小节路径，确保跳转正确 -->
          <nuxt-link :to="localePath(`${chapter.path}/${section.path}`)">
            {{ section.label }}
          </nuxt-link>
        </li>
      </ol>
    </li>
  </ol>
</template>

Script 部分（保留你的ROUTES定义不变） #

export const ROUTES = Object.freeze({
  home: "/",
  chapters: {
    chapter1: {
      path: "/1-introduction",
      label: "1 Introduction",
      sections: {
        section1: { path: "1.1-all-about-batteries", label: "1.1 All about batteries" },
        section2: { path: "1.2-why-recycle", label: "1.2 Why recycle" },
        section3: { path: "1.3-ultimate-goal", label: "1.3 Ultimate goal" },
      },
    },
    chapter2: {
      path: "/2-collecting-and-sorting",
      label: "2 Collecting and sorting",
      sections: {
        section1: { path: "2.1-storing-batteries-at-home", label: "2.1 Storing batteries at home" },
        section2: { path: "2.2-bebat-collection-system", label: "2.2 Bebat collection system" },
        section3: { path: "2.3-sortbat-sorting-system", label: "2.3 Sortbat sorting system" },
      },
    },
    chapter3: {
      path: "/3-recycling",
      label: "3 Recycling",
      sections: {
        section1: { path: "3.1-battery-recycling-history", label: "3.1 Battery recycling history" },
        section2: { path: "3.2-modern-trends", label: "3.2 Modern trends" },
        section3: { path: "3.3-general-recycle-process", label: "3.3 General recycle process" },
      },
    },
    chapter4: {
      path: "/4-faq",
      label: "4 FAQ",
      sections: {
        section1: { path: "4.1-frequently-asked-questions", label: "4.1 Frequently asked questions" },
      },
    },
    chapter5: {
      path: "/5-future",
      label: "5 Future",
      sections: {
        section1: { path: "5.1-safety-concerns", label: "5.1 Safety Concerns" },
        section2: { path: "5.2-the-future", label: "5.2 The future" },
        section3: { path: "5.3-a-message-from-bebat", label: "5.3 A message from Bebat" },
      },
    },
  },
});

关键修改说明 #

1. 对象转数组遍历：用Object.values()把chapters和sections对象转换成数组，让v-for能正确遍历每一项数据。
2. 修正跳转路径：把章节的跳转链接从$ROUTES.home改成chapter.path，确保点击章节标题跳转到对应章节首页；小节路径通过拼接章节路径和小节路径，保证跳转地址正确。
3. 合理绑定key值：用每个章节/小节的label作为key（因为label是唯一标识），符合Vue的列表渲染规范。

这样修改后，就能先显示所有章节，每个章节下方自动展开对应的所有小节了。

内容的提问来源于stack exchange，提问作者Borsj