英文:
Dynamic Nested folder pages in nuxt 3
问题
我想要不同的数据，并且在页面的slug和section上应该是动态的。
我想要实现这样的路由结构，如图所示，有一个名为的文件夹。
community/[...slug]/
index.vue
[section]
index.vue
当打开像localhost:3000/community/grandview-terrace这样的页面时，它工作正常。
但是当我打开像localhost:3000/community/grandview-terrace/dinner这样的页面时，它会打开相同的前一页视图。
英文:
I want a different data, and on the pages slug and section should be dynamic.Enter image description here.
I want to achieve this routing structure which I provide in the image there is folder called.
community/[...slug]/
index.vue
[section]
index.vue
when opened the page like localhost:3000/community/grandview-terrace It working fine
but when i open page like ocalhost:3000/community/grandview-terrace/dinner It's open the same previous page view.
答案1
得分: 0
你的页面结构应该像这样。
当使用嵌套动态页面时，更安全的做法是创建一个动态的 Nuxt 页面和一个动态文件夹。例如，在你的情况下，你想要 slug 是动态的，所以你创建一个名为 [slug].vue 的 Vue 文件，在这个文件中包含了 NuxtPage。
slug.vue
<template>
<div>
<NuxtPage />
</div>
</template>
之后，创建一个动态的 slug 文件夹，像这样 [slug]，并在该文件夹内添加一个 index.vue 文件，该 index.vue 文件内包含了你的动态 slug 路由的内容。
此外，这个 文档 将帮助你理解嵌套页面的工作原理。
index.vue 内容示例：
<template>
<div>
<div>
动态 Slug 页面
<pre>{{ $route.params }}</pre>
</div>
<NuxtLink to="/">返回首页</NuxtLink>
</div>
</template>
你可以在这里找到一个基于你的问题的工作示例：
https://stackblitz.com/edit/nuxt-starter-ea4ynz?file=pages%2Findex.vue
注意： 在创建新页面/页面时，始终重新启动 Nuxt。
另请参阅
https://stackoverflow.com/questions/75667222/nuxtjs-nested-routes-with-param/75668752#75668752
英文:
You pages structure should be like this.
When working with nested dynamic pages, it is safer to create a dynamic Nuxt page and a dynamic folder. e.g. in your case, you want the slug to be dynamic, so you create a vue file called [slug].vue and inside this file is the NuxtPage
slug.vue
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<template>
<div>
<NuxtPage />
</div>
</template>
<!-- end snippet -->
After that, create a dynamic slug folder like this [slug] and add an index.vue inside that folder, and inside that index.vue file will be the content of your dynamic slug route.
Also, this documentation will help you understand how nested pages works
index.vue content e.g
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<template>
<div>
<div>
Dynamic Slug page
<pre>{{ $route.params }}</pre>
</div>
<NuxtLink to="/">Back to Home page</NuxtLink>
</div>
</template>
<!-- end snippet -->
A working example based on your question can be found here
https://stackblitz.com/edit/nuxt-starter-ea4ynz?file=pages%2Findex.vue
NOTE: Always restart Nuxt when you create a new page/pages
See also
https://stackoverflow.com/questions/75667222/nuxtjs-nested-routes-with-param/75668752#75668752
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论