Added hooks

Author: ba0708

src/Cart.vue

@@ -62,6 +62,15 @@
 
     export default {
         props: ['cart'],
-        mixins: [ CartMixin ]
+        mixins: [ CartMixin ],
+        beforeRouteLeave(to, from, next) {
+            if (this.cart.items.length > 0) {
+                if (!confirm('Are you sure you don\'t want to buy these products?')) {
+                    return next(false);
+                }
+            }
+
+            next();
+        }
     }
 </script>

src/ViewProduct.vue

@@ -27,21 +27,17 @@
             };
         },
         created() {
-            this.$watch('$route.query.discount', (newValue, oldValue) => {
-                this.discount = this.getDiscount(this.product.price, newValue);
-            });
-
             this.product = this.getProduct(this.productId);
 
             if (typeof this.$route.query.discount !== 'undefined') {
                 this.discount = this.getDiscount(this.product.price, this.$route.query.discount);
             }
         },
-        watch: {
-            productId(newValue, oldValue) {
-                this.product = this.getProduct(newValue);
-                this.discount = this.getDiscount(this.product.price, this.$route.query.discount);
-            }
+        beforeRouteUpdate(to, from, next) {
+            this.discount = this.getDiscount(this.product.price, to.query.discount);
+            this.product = this.getProduct(to.params.productId);
+
+            next();
         },
         methods: {
             getProduct(productId) {

src/ViewProfile.vue

@@ -1,3 +1,18 @@
 <template>
     <h1>My Profile</h1>
-</template>
+</template>
+
+<script>
+    import { authService } from './main';
+
+    export default {
+        beforeRouteEnter(to, from, next) {
+            if (!authService.isLoggedIn) {
+                alert("You must be logged in!");
+                return next(false);
+            }
+
+            next();
+        }
+    }
+</script>

src/routes.js

@@ -5,7 +5,6 @@ import Product from './Product.vue';
 import ProductReviews from './ProductReviews.vue';
 import SpecialOffer from './SpecialOffer.vue';
 import ViewProfile from './ViewProfile.vue';
-import { authService } from './main';
 
 export const routes = [
     { path: '', components: {
@@ -19,15 +18,7 @@ export const routes = [
     {
         path: '/user/profile',
         name: 'viewProfile',
-        component: ViewProfile,
-        beforeEnter(to, from, next) {
-            if (!authService.isLoggedIn) {
-                alert("You must be logged in!");
-                return next(false);
-            }
-        
-            next();
-        }
+        component: ViewProfile
     },
     { path: '/cart', component: Cart },
     { path: '*', component: { template: '<h1>Page Not Found!</h1>' } }