05_08_f

Author: mahedes

vuejs3-linkedin-project/src/components/Products.vue

@@ -5,9 +5,7 @@
       <h3>Pizza {{ type }}</h3>
       <p>Prix : {{ price }} €</p>
       <p>{{ ingredients }}</p>
-      <router-link
-        :to="{ name: 'product-details', params: { name: 'un-parametre' } }"
-      >
+      <router-link :to="{ name: 'product-details', params: { name: type } }">
         Commander >>
       </router-link>
     </div>

vuejs3-linkedin-project/src/router/index.js

@@ -4,6 +4,7 @@ import Contact from "../views/Contact.vue";
 import NotFound from "../views/NotFound.vue";
 import ProductDetails from "../views/ProductDetails.vue";
 
+
 const routes = [
   {
     path: "/",
@@ -20,6 +21,7 @@ const routes = [
     path: '/products/:name',
     name: "product-details",
     component: ProductDetails,
+    props: true
   },
   {
     path: '/:catchAll(.*)',

vuejs3-linkedin-project/src/views/ProductDetails.vue

@@ -46,7 +46,7 @@
       <!-- Description du produit -->
       <div class="product-description">
         <h1>
-          {{ $route.params.name }}
+          {{ title }}
           <img class="img-best-seller" src="../assets/images/best-seller.png" />
         </h1>
         <p v-show="notAvailable">Momentanément indisponible</p>
@@ -105,6 +105,7 @@
 
 <script>
 export default {
+  props: ["name"],
   data() {
     return {
       product: "Pizza",