javascript - Passing props to<nuxt-link> or pass hidden data to router but not using parameters - Stack Overflow

admin管理员组

文章数量:1312774

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?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Jul 27, 2019 at 3:46 KyleKyle 22922 gold badges44 silver badges1313 bronze badges 1

• Did you find a working solution to do this? – TVBZ Commented May 13, 2021 at 7:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You 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>

本文标签：