Pass the id number in the link using nuxt-link

Question

I'm working on small project using nuxt.js and i would like to create a link to my products varints using <nuxt-link to=""> and i don't know how can i pass the id of the product that i get from the database i tried with but i get an error.

what should i do ? this is my code :

<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

Does this work?

<nuxt-link :to="{name: 'name-of-your-router', params: { id: product.id } }">

According to this https://github.com/nuxt/nuxt.js/issues/1546#issuecomment-326267738 :

If you want to use params you need to use name and not path:

<nuxt-link :to="{name: 'post-detail-id', params: { id:idPost } }">{{title}}</nuxt-link>

You can see the name for each route into .nuxt/router.js

Answer 3

this worked for me at pages/posts/_slug/index.vue

params

<nuxt-link
  :to="{ name: 'posts-slug', params: { slug: slug, id: id }}"      
  class="btn btn-primary"
>

query

 <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