Nuxt3中使用ContentNavigation组件读取planets嵌套目录遇路由警告

问题原因 #

你手动查询能正确获取content/planets下的行星文件，但ContentNavigation组件会把planets目录本身（路径/planets）也作为一个导航节点返回。而你的项目中没有为/planets路径创建对应的页面（比如pages/planets.vue或content/planets/index.md），导致Vue Router找不到匹配路由，抛出警告。

解决方案 #

方案一：过滤目录节点，只渲染行星文件

修改组件逻辑，过滤掉目录本身的导航项，只保留行星文件节点：

<nav>
  <ContentNavigation v-slot="{ navigation }" :query="queryPlanets">
    <!-- 过滤掉/planets目录节点 -->
    <div 
      v-for="link of navigation" 
      :key="link._path" 
      v-if="link._path !== '/planets'"
    >
      <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
    </div>
  </ContentNavigation>
</nav>

<script setup>
const queryPlanets = queryContent('planets')
</script>

更严谨的方式是通过_type字段判断（目录的_type为directory，文件为file）：

<div 
  v-for="link of navigation" 
  :key="link._path" 
  v-if="link._type === 'file'"
>
  <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
</div>

方案二：为/planets路径添加对应页面

如果希望保留/planets的导航项，只需为该路径创建页面：

• 在content/planets目录下创建index.md或index.yml，作为目录首页的内容文件；
• 或者在pages目录下创建planets.vue，编写自定义页面组件。

调试建议 #

可以在插槽中打印navigation的结构，明确返回的节点类型：

<ContentNavigation v-slot="{ navigation }" :query="queryPlanets">
  <!-- 打印导航节点数据，便于排查 -->
  <pre>{{ JSON.stringify(navigation, null, 2) }}</pre>
  <!-- 渲染导航项 -->
  <div 
    v-for="link of navigation" 
    :key="link._path" 
    v-if="link._type === 'file'"
  >
    <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
  </div>
</ContentNavigation>

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