[英]Pass the id number in the link using nuxt-link
我正在使用 nuxt.js 处理小项目,我想使用<nuxt-link to="">
创建到我的产品<nuxt-link to="">
,但我不知道如何传递我的产品的 id从我尝试使用的数据库中获取,但出现错误。
我该怎么办 ? 这是我的代码:
<tr v-for="product in variables.laravelData.data" :key="product.id">
<td>
<input type="checkbox" name="">
</td>
<td><img src="images/ui/thumb.jpg" width="38" height="38" alt=""></td>
<td>
<nuxt-link to="/products/variants/{{product.id}}">
{{ product.product_name }}
</nuxt-link>
</td>
</tr>
您应该绑定to
指令以使用template strings
编写动态 ID,如下所示:
<nuxt-link :to="`/products/variants/${product.id}`">
这行得通吗?
<nuxt-link :to="{name: 'name-of-your-router', params: { id: product.id } }">
根据这个https://github.com/nuxt/nuxt.js/issues/1546#issuecomment-326267738 :
如果要使用参数,则需要使用名称而不是路径:
<nuxt-link :to="{name: 'post-detail-id', params: { id:idPost } }">{{title}}</nuxt-link>
您可以在 .nuxt/router.js 中看到每个路由的名称
这在 pages/posts/_slug/index.vue 对我有用
参数
<nuxt-link
:to="{ name: 'posts-slug', params: { slug: slug, id: id }}"
class="btn btn-primary"
>
询问
<nuxt-link
:to="{ path: '/posts/' + slug, query: { id: id}}"
class="btn btn-primary"
>
http://localhost:3000/posts/fuga-dicta-qui-cum-reiciendis-et-eaque?id=10
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.