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

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

nuxtjs3 nuxt.js vuejs3 vue.js

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.

你的页面结构是这样的。

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

预期输出。

希望能有所帮助