代码之家  ›  专栏  ›  技术社区  ›  Danny

如何使用Nuxt 3动态处理无尽的嵌套路由?

  •  1
  • Danny  · 技术社区  · 1 年前

    如果我有无穷无尽的嵌套路由(即基于用户创建的文章中的文章),该怎么办

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

    如何在Nuxt 3中处理类似的事情,而不必手动创建每个目录和动态文件?

    1 回复  |  直到 1 年前
        1
  •  0
  •   Reagan    1 年前

    我需要使用包罗万象的路线。 Documentation and example.

    你的页面结构是这样的。

    enter image description here

    |-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>

    预期输出。 enter image description here

    希望能有所帮助