add useRoute

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 }
   ]
 });

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 title = computed(() => selectedProdcut.value.title);
-    const price = selectedProdcut.price;
+    const price = computed(() => selectedProdcut.value.price);
-    const description = selectedProdcut.description;
+    const description = computed(() => selectedProdcut.value.description);
 
     return { title, price, description };
   }