使用 nuxt-link 在链接中传递 id 号答案

【问题标题】：Pass the id number in the link using nuxt-link使用 nuxt-link 在链接中传递 id 号
【发布时间】：2020-01-26 21:52:31
【问题描述】：

我正在使用 nuxt.js 进行小型项目，我想使用 <nuxt-link to=""> 创建指向我的产品 varints 的链接，但我不知道如何传递从我尝试使用的数据库，但出现错误。

我该怎么办？这是我的代码：

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

你应该绑定to指令来使用template strings写一个动态id，如下：

<nuxt-link :to="`/products/variants/${product.id}`">

【讨论】：

【解决方案2】：

这行得通吗？

<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 中看到每个路由的名称

【讨论】：

【解决方案3】：

这对我有用 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

https://nuxtjs.org/guides/context.svg

【讨论】：