Vue 라우터 - 링크 매개 변수

Question

내 라우터 - 링크 :에 문제가 있습니다. 내 라우터 링크가 내 템플릿을 렌더링하지 않습니다. 여기 내 웹 라우팅, routes.js 및 vue 템플릿입니다. 나는 img 제품에 대한 clik을 'product/1234'라고하고 싶지만 'product'만 리디렉션합니다. 내 실수는 어디 갔지? 웹 :

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

routes.js :

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

와 뷰 템플릿 :

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