如何使用 Nuxt 3 动态处理无限嵌套路由？

Question

如果我有无尽的不停歇的嵌套路线（即基于用户创建的文章中的文章）怎么办：

/articles/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/infinity

如何在 Nuxt 3 中处理类似的事情，而无需手动创建每个目录和动态文件？

Answer 1

为此我需要使用捕获所有路线。 文档和示例。

你的页面结构是这样的。

|-pages
|-articles = Folder
|--[...id].vue = Catch all routes
|--index.vue = Article Content 
|-articles.vue = NuxtPage
|-index.vue = Home page

~pages/articles.vue

<script lang="ts" setup>

</script>
<template>
  <div>
    <NuxtPage />
  </div>
</template>
<style scoped lang="css"></style>

~/pages/articles/index.vue

文章内容示例

<script lang="ts" setup>

</script>
<template>
  <div>
    Articles page
  </div>
</template>
<style scoped lang="css"></style>

~/pages/articles/[...id].vue

动态ID

<script lang="ts" setup>

const route = useRoute()
</script>
<template>
  <div>
    <h1>Dynamic ID. Params: {{ route.params.id }}</h1>
  </div>
</template>
<style scoped lang="css"></style>

预期产出。

希望有帮助