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

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

nuxtjs3 nuxt.js vuejs3 vue.js

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

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>

预期输出。

希望能有所帮助

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

5 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

5 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

9 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

9 月前

gespinha · 当元素不再可见时,如何更改ref元素?

10 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

10 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前