From 088430e2fb8963432ead118d50afaabe38c62b04 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Mon, 6 Sep 2021 12:56:14 +0200
Subject: [PATCH] add useRoute

---
 .../src/main.js                                |  2 +-
 .../src/pages/ProductDetails.vue               | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/2021-09-06_composition-17-routing-starting-project/src/main.js b/2021-09-06_composition-17-routing-starting-project/src/main.js
index 565dbd4..816172b 100644
--- a/2021-09-06_composition-17-routing-starting-project/src/main.js
+++ b/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, props: true },
+    { path: '/products/:pid', component: ProductDetails },
     { path: '/products/add', component: AddProduct }
   ]
 });
diff --git a/2021-09-06_composition-17-routing-starting-project/src/pages/ProductDetails.vue b/2021-09-06_composition-17-routing-starting-project/src/pages/ProductDetails.vue
index 495b78e..537605a 100644
--- a/2021-09-06_composition-17-routing-starting-project/src/pages/ProductDetails.vue
+++ b/2021-09-06_composition-17-routing-starting-project/src/pages/ProductDetails.vue
@@ -3,22 +3,26 @@
     <h2>{{ title }}</h2>
     <h3>${{ price }}</h3>
     <p>{{ description }}</p>
+    <router-link to="/products/p2">Second Products</router-link>
   </section>
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject, computed } from 'vue';
+import { useRoute } from 'vue-router';
 
 export default {
   props: ['pid'],
-  setup(props) {
+  setup() {
     const products = inject('products');
-    const selectedProdcut = products.value.find(
-      product => product.id === props.pid
+
+    const route = useRoute();
+    const selectedProdcut = computed(() =>
+      products.value.find(product => product.id === route.params.pid)
     );
-    const title = selectedProdcut.title;
-    const price = selectedProdcut.price;
-    const description = selectedProdcut.description;
+    const title = computed(() => selectedProdcut.value.title);
+    const price = computed(() => selectedProdcut.value.price);
+    const description = computed(() => selectedProdcut.value.description);
 
     return { title, price, description };
   }