How to pass multiple parameters in Nuxt?

Admin 1
Viewed 10126

In Nuxt.js if I have in pages/posts/_id.vue this code:

<template>                                                                                                                                                              
  <div>                                                                                                                                                                 
    Post id: {{$route.params.id }}                                                                                                                                    
  </div>                                                                                                                                                                
</template>

When I type in the URL: http://localhost:3000/posts/123, it displays Post id: 123.

So I learned how to pass one parameter through the URL.
But I want to pass also the category to which the post belongs to and display a message like this one: Post id: 123. Category: News.

  • How can I structure the posts folder and get the result I want?
  • And how to access the URL in this case? Something like http://localhost:3000/posts/123/News` ?
nuxt.js vue.js javascript
1 Answers

See Dynamic Nested Routes in the documentation. Your directory structure should look like this:

posts/
--| _category/
-----| _id.vue

The URL will be http://localhost:3000/posts/news/123.

You can access the category parameter with {{ $route.params.category }}.

user_38539340
Related