CODEWITHSUNDEEP
vue-routernuxt.js
Toni PRI
Toni PRI

Reputation: 11

Is it possible in Nuxt.js to have multiple route parameters with same level hierarchy?

Is it possible in Nuxt.js to have multiple route parameters with same level hierarchy? For instance:

- entry
-- _id.vue
-- _slug.vue
- index.js

Upvotes: 0

Views: 1204

Answers (2)

DevonDahon
DevonDahon

Reputation: 8350

With Nuxt3, for an URL like this mywebsite.com/param1/param2/param3, you need this structure:

pages
└── [param1]
    └── [param2]
        └── [param3].vue

And to show it in the console, put this in [param3].vue

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params);
</script>

ref. https://nuxt.com/docs/guide/directory-structure/pages#nested-routes

Upvotes: 0

Ejdrien
Ejdrien

Reputation: 2910

No, it's not possible.

But you can use a simple workaround.

Case 1

You need both _id and _slug in the same route. Then you can simply nest them. So that your route will look like this: entry/_id/_slug. And your files would look like this:

entry/
--| _id/
-----| index.vue //this one is for _id
-----| _slug/
--------| index.vue //this one is for _slug

Also you can swap _id with _slug if it fits your needs better.

Case 2

You need two different routes: entry/id/_id and entry/slug/_slug. In this case your files would look like this:

entry/
--| id/
-----| _id.vue
--| slug/
-----| _slug.vue

Upvotes: 1

Related Questions