Added named view

Author: ba0708

src/App.vue

@@ -1,30 +1,34 @@
 <template>
-    <div class="container">
-        <nav class="navbar navbar-default">
-            <div class="container-fluid">
-                <div class="navbar-header">
-                    <router-link to="/" exact class="navbar-brand"><strong>E-commerce Inc.</strong></router-link>
-                </div>
+    <div>
+        <router-view name="discount"></router-view>
+
+        <div class="container">
+            <nav class="navbar navbar-default">
+                <div class="container-fluid">
+                    <div class="navbar-header">
+                        <router-link to="/" exact class="navbar-brand"><strong>E-commerce Inc.</strong></router-link>
+                    </div>
 
-                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                    <ul class="nav navbar-nav">
-                        <router-link to="/" tag="li" exact active-class="active">
-                            <a>Products</a>
-                        </router-link>
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        <ul class="nav navbar-nav">
+                            <router-link to="/" tag="li" exact active-class="active">
+                                <a>Products</a>
+                            </router-link>
 
-                        <router-link to="/cart" tag="li" active-class="active">
-                            <a>Cart</a>
-                        </router-link>
-                    </ul>
+                            <router-link to="/cart" tag="li" active-class="active">
+                                <a>Cart</a>
+                            </router-link>
+                        </ul>
 
-                    <div class="nav navbar-nav navbar-right">
-                        <div class="stats">{{ cart.items.length }} <template v-if="cart.items.length == 1">item</template><template v-else>items</template> in cart, totalling {{ cartTotal | currency }}</div>
+                        <div class="nav navbar-nav navbar-right">
+                            <div class="stats">{{ cart.items.length }} <template v-if="cart.items.length == 1">item</template><template v-else>items</template> in cart, totalling {{ cartTotal | currency }}</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </nav>
+            </nav>
 
-        <router-view :cart="cart"></router-view>
+            <router-view :cart="cart"></router-view>
+        </div>
     </div>
 </template>
 

src/SpecialOffer.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="container-fluid">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12">
+                    <strong>Hurry up and get a discount of 20% by clicking an image!</strong>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .container-fluid {
+        height: 40px;
+        color: #fff;
+        line-height: 40px;
+        text-align: center;
+        background-color: orange;
+    }
+</style>

src/routes.js

@@ -3,9 +3,13 @@ import ViewProduct from './ViewProduct.vue';
 import Cart from './Cart.vue';
 import Product from './Product.vue';
 import ProductReviews from './ProductReviews.vue';
+import SpecialOffer from './SpecialOffer.vue';
 
 export const routes = [
-    { path: '', component: ProductList },
+    { path: '', components: {
+        default: ProductList,
+        discount: SpecialOffer
+    } },
     { path: '/products/:productId', name: 'product', props: true, component: Product, children: [
         { path: 'details', name: 'viewProduct', props: true, component: ViewProduct },
         { path: 'reviews', name: 'productReviews', props: true, component: ProductReviews }