CODEWITHSUNDEEP
vue.jsvuejs2vue-routernuxt.js
btibia
btibia

Reputation: 23

Nuxt routing multiple levels

Could somebody explain how to add a multi levels (children) path using nuxt. The structure of my project is:

├root
│  ├── events
│      ├── _id.vue
│      ├── cateogries
│          └── _id.vue

Basically my links are like this:

http://localhost/events

Will display a list of events

http://localhost/events/{id}

Will display the event information plus some categories

http://localhost/events/{id}/category/{id}

Will display the event category information

I've tried doing the structure of the folders and subfolders and is not working.
I've tried to use inside _id.vue from events <nuxt-child/> and is not working.

Does anyone has any ideas how to solve this?

Thank you in advanced.

Upvotes: 1

Views: 3035

Answers (1)

JanuszO
JanuszO

Reputation: 1240

First, not duplicate id param, use other name.

you can use such a structure:

├pages
│  ├── events
│      ├── _eid
│          ├── category
|             |__ index.vue
│             └── _id.vue

_id.vue for http://localhost:3000/events/2/category/5

<template>
    <div>
    {{ $route.params }} //{ "eid": "2", "id": "5" }

    Hello from _id
    </div>    
</template>

For each level add index.vue or a dynamic "_".

Also be consistent in names (category or categories)

Upvotes: 2

Related Questions