0

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.

ReaganM
  • 1,290
  • 1
  • 11
Mandeep
  • 13
  • 4
  • Can you add more details on your question? It's unclear what you are trying to achieve. – ReaganM Jul 24 '23 at 10:12
  • If you need more complex routes, i'd recommend creating your own router file, where you can specify your routes directly. You can find how to do that in Nuxt3 documentation: https://nuxt.com/docs/guide/going-further/custom-routing – Mira135 Jul 24 '23 at 10:53
  • HI @ReaganM I just updated my question – Mandeep Jul 25 '23 at 05:07

1 Answers1

0

You pages structure should be like this. enter image description here

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 

<template>
  <div>
    <NuxtPage />
  </div>
</template>

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

<template>
  <div>
    <div>
      Dynamic Slug page
      <pre>{{ $route.params }}</pre>
    </div>
    <NuxtLink to="/">Back to Home page</NuxtLink>
  </div>
</template>

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 NuxtJS nested routes with param

ReaganM
  • 1,290
  • 1
  • 11