Vue router-link params

Question

I have a problem with my router-link :to. My router-link doesn't render my template. here is my web routing, routes.js and vue template. I want to go after clik on img product to: 'product/1234' but it redirect me only 'product'. Where is my mistake? Web:

     Route::get('/product/{id}', 'ProductController@show');

routes.js:

 {
        path: '/product/:id',
        name: 'ProductIndex',
        component: ProductIndex
    }

and Vue template:

 <div class="product" v-for="product in products">
            <router-link class="product-image" :to="{ path: 'product', params: { id: product.id}}">
                <img src="/static/shop/products/shoe-example.png"/>
            </router-link>
 </div>

Answer 1

您正在链接到路径，请尝试将其更改为路线名称：

<router-link class="product-image" :to="{ name: 'ProductIndex', params: { id: product.id}}">
      <img src="/static/shop/products/shoe-example.png"/>
</router-link>