Nuxt3动态嵌套文件夹页面问题：路由匹配异常求助

你遇到的核心问题是路由匹配优先级冲突，以及数据获取逻辑未响应路由参数变化：

• [...slug] 是 catch-all（通配符）路由，会匹配 /community/ 之后的所有路径（包括 grandview-terrace/dinner），导致嵌套的 [section]/index.vue 无法被正确命中。
• 即使路由参数更新，数据获取逻辑未监听参数变化，导致页面内容没有刷新。

方案1：调整路由结构（推荐） #

将 catch-all 路由 [...slug] 改为单个动态段 [slug]，避免通配符覆盖嵌套路由：

community/
  [slug]/
    index.vue       # 匹配 /community/:slug
    [section]/
      index.vue     # 匹配 /community/:slug/:section

这样路由匹配逻辑会更清晰：

• 访问 /community/grandview-terrace → 命中 [slug]/index.vue，参数 slug=grandview-terrace
• 访问 /community/grandview-terrace/dinner → 命中 [slug]/[section]/index.vue，参数 slug=grandview-terrace、section=dinner

方案2：保留catch-all路由，处理参数并监听变化 #

如果必须使用 [...slug]，需要在 [...slug]/index.vue 中解析参数数组，并监听路由变化重新获取数据：

在Nuxt3中实现： #

<script setup>
const route = useRoute()
const data = ref(null)

// 解析slug参数数组：单个元素为社区名，两个元素为社区+板块
async function fetchCommunityData() {
  const slugParts = route.params.slug || []
  if (slugParts.length === 1) {
    // 请求社区基础数据
    data.value = await $fetch(`/api/community/${slugParts[0]}`)
  } else if (slugParts.length === 2) {
    // 请求对应板块的数据
    data.value = await $fetch(`/api/community/${slugParts[0]}/${slugParts[1]}`)
  }
}

// 监听路由参数变化，立即执行初始请求
watch(() => route.params.slug, fetchCommunityData, { immediate: true })
</script>

验证路由生成结果 #

运行 nuxi show routes 命令，确认路由列表中是否存在 /community/:slug*/:section，如果不存在，说明文件结构的路由生成逻辑不符合预期，需要调整。

关键注意点 #

• 使用 useAsyncData 时，必须将路由参数加入依赖列表，确保参数变化时重新请求：

  const { data } = useAsyncData('community-data', async () => {
    const slugParts = route.params.slug || []
    // ...请求逻辑
  }, { watch: [() => route.params.slug] })
  

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