Used props instead of object

Author: ba0708

src/ViewProduct.vue

@@ -12,15 +12,19 @@
     import { products } from './data/products';
 
     export default {
+        props: {
+            productId: {
+                required: true
+            }
+        },
         data() {
             return {
                 products: products,
                 product: null
             };
         },
         created() {
-            let productId = this.$route.params.productId;
-            this.product = this.getProduct(productId);
+            this.product = this.getProduct(this.productId);
         },
         methods: {
             getProduct(productId) {

src/routes.js

@@ -5,6 +5,6 @@ import ViewProduct from './ViewProduct.vue';
 export const routes = [
     { path: '', component: ProductList },
     { path: '/cart', component: Cart },
-    { path: '/products/:productId', name: 'viewProduct', component: ViewProduct },
+    { path: '/products/:productId', name: 'viewProduct', props: true, component: ViewProduct },
     { path: '*', component: { template: '<h1>Page Not Found!</h1>' } }
 ];