add a route with props

2021-09-06_composition-17-routing-starting-project/src/main.js

@@ -11,7 +11,7 @@ const router = createRouter({
   routes: [
     { path: '/', redirect: '/products' },
     { path: '/products', component: AllProducts },
-    { path: '/products/:pid', component: ProductDetails },
+    { path: '/products/:pid', component: ProductDetails, props: true },
     { path: '/products/add', component: AddProduct }
   ]
 });

2021-09-06_composition-17-routing-starting-project/src/pages/AllProducts.vue

@@ -6,7 +6,7 @@
         <h3>{{ product.title }}</h3>
         <h4>${{ product.price }}</h4>
         <p>{{ product.description }}</p>
-        <router-link to="/products/id">View Details</router-link>
+        <router-link :to="'/products/' + product.id">View Details</router-link>
       </li>
     </ul>
   </section>
@@ -20,7 +20,7 @@ export default {
     const loadedProducts = inject('products');
 
     return { products: loadedProducts };
-  },
+  }
 };
 </script>
 
@@ -45,7 +45,8 @@ li {
   padding: 1rem;
 }
 
-h3, h4 {
+h3,
+h4 {
   margin: 0.5rem 0;
 }
-</style>
+</style>

2021-09-06_composition-17-routing-starting-project/src/pages/ProductDetails.vue

@@ -1,26 +1,30 @@
 <template>
   <section>
     <h2>{{ title }}</h2>
-    <h3>${{ price}}</h3>
-    <p>{{ description}}</p>
+    <h3>${{ price }}</h3>
+    <p>{{ description }}</p>
   </section>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { inject } from 'vue';
 
 export default {
-  setup() {
-    const title = ref('');
-    const price = ref(null);
-    const description = ref('');
+  props: ['pid'],
+  setup(props) {
+    const products = inject('products');
+    const selectedProdcut = products.value.find(
+      product => product.id === props.pid
+    );
+    const title = selectedProdcut.title;
+    const price = selectedProdcut.price;
+    const description = selectedProdcut.description;
 
     return { title, price, description };
-  },
+  }
 };
 </script>
 
-
 <style scoped>
 section {
   margin: 3rem auto;
@@ -29,4 +33,4 @@ section {
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
 }
-</style>
+</style>