将道具传递给 <nuxt-link> 或将隐藏数据传递给路由器但不使用参数

Question

目前，我正在为我的网络应用程序使用 nuxt 和 vue 路由。

在我看来，我的链接是这样的： <nuxt-link :to="'/article/' + article.id">

随后，我在我的文章页面上使用此文章 ID，通过从 URL 请求参数来发出我的 API 请求： ${params.id}

这很好，但我的 URL 最终是这样的：article/1 但我想开始使用用户友好的 URL，例如 article/this-is-my-article，但我仍然需要传递文章 ID。

有没有办法通过道具将此 ID 传递给 nuxt-link，或者是否有任何其他方法可以将此 ID 传递为“不可见”，以便我可以使用它来进行 API 调用？

Answer 1

你可以使用带有参数的 $router 而不是 nuxt-link 来做你想做的事，我想。 这是我的建议。

<div@click="$router.push({name:'[goal name]', params:{[params]}})" >View All History</div>

此处为示例。

<div @click="$router.push({name:'view_tables-display_reports', params:{id:'pie'}})" >View All History</div>

Answer 2

我建议在你的表中创建一个新字段而不是 id 并使用 unique() 将其命名为 slug 然后使用它作为标识符，这样它会更加用户友好。