使用nuxt-link在链接中传递ID号

Question

我正在使用nuxt.js进行小型项目，并且我想使用<nuxt-link to="">创建到我的产品varint的链接，但我不知道如何传递从数据库中获得的产品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>

Answer 1

您应该绑定to指令以使用template strings编写动态ID，如下所示：

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

Answer 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的每个路由的名称