Currently, I'm using nuxt and vue routing for my web app.
in my view I'm my link like this:
<nuxt-link :to="'/article/' + article.id">
subsequently, I'm using this article ID on my article page by requesting the parameter from the URL do make my API request:
${params.id}
This works fine but my URL ends up like this: article/1 but I want to start using user-friendly URL's like article/this-is-my-article but I still need to pass the article id.
Is there a way to pass this ID to nuxt-link with a prop or is there any other way to pass this id 'invisible' so I can use it to ake my API call?
Currently, I'm using nuxt and vue routing for my web app.
in my view I'm my link like this:
<nuxt-link :to="'/article/' + article.id">
subsequently, I'm using this article ID on my article page by requesting the parameter from the URL do make my API request:
${params.id}
This works fine but my URL ends up like this: article/1 but I want to start using user-friendly URL's like article/this-is-my-article but I still need to pass the article id.
Is there a way to pass this ID to nuxt-link with a prop or is there any other way to pass this id 'invisible' so I can use it to ake my API call?
Share Improve this question asked Jul 27, 2019 at 3:46 KyleKyle 2292 gold badges4 silver badges13 bronze badges 1- Did you find a working solution to do this? – TVBZ Commented May 13, 2021 at 7:01
3 Answers
Reset to default 4You can use the $router with params instead nuxt-link to do you want, I think. Here my suggestion.
<div@click="$router.push({name:'[goal name]', params:{[params]}})" >View All History</div>
exmaple here.
<div @click="$router.push({name:'view_tables-display_reports', params:{id:'pie'}})" >View All History</div>
I Suggest that instead of id create a new field in your table and name it slug with unique() then use this as identifier so it will be more user friendly.
Use <Nuxt-Link> with a named route and params
With this, params will not be exposed in the URL, and depending on how you have your router setup, they'll be passed into equivalent props in the ponent loaded for the route, ie: a route param id will pass into a ponent prop id.
<nuxt-link :to="{ name: 'MyArticleRoute', params: { id: id } }">
View Article
</nuxt-link>