小改动

src/components/nav-bar/index.vue

@@ -13,10 +13,12 @@
         </div>
         <div class="body">
           <ul class="menu">
-            <li class="menu-item" @click="$router.push('/appointment')">
-              REPAIR BOOKING
+            <li class="menu-item">
+              <router-link to="/appointment">REPAIR BOOKING</router-link>
+            </li>
+            <li class="menu-item">
+              <router-link to="/fill-order">ONLINE SHOP</router-link>
             </li>
-            <li class="menu-item">ONLINE SHOP</li>
             <li class="menu-item">PTC Care Plus</li>
             <li class="menu-item">SOTRE LOCATION</li>
             <li class="menu-item">CONTACT US</li>
@@ -70,13 +72,26 @@
             </div>
           </div>
           <ul class="list">
-            <li class="item">MY REPAIR REQUEST</li>
-            <li class="item">MY ORDER</li>
-            <li class="item">MY DISCOUNT COUPON</li>
             <li class="item">
-              INVITE FRIENDS <span class="ptc-tag">Get a $10 coupon</span>
+              <router-link to="/appointment-list"
+                >MY REPAIR REQUEST</router-link
+              >
+            </li>
+            <li class="item">
+              <router-link to="/order">MY ORDER</router-link>
+            </li>
+            <li class="item">
+              <router-link to="/gift-card">MY DISCOUNT COUPON</router-link>
+            </li>
+            <li class="item">
+              <router-link to="/invite"
+                >INVITE FRIENDS
+                <span class="ptc-tag">Get a $10 coupon</span></router-link
+              >
+            </li>
+            <li class="item">
+              <router-link to="/account">ACCOUNT INFORMATION</router-link>
             </li>
-            <li class="item">ACCOUNT INFORMATION</li>
             <li class="item">SIGN OUT</li>
           </ul>
         </div>
@@ -205,6 +220,11 @@ watch(
       &:active {
         background-color: $primary-color-lighten;
       }
+
+      a {
+        display: block;
+        width: 100%;
+      }
     }
   }
 
@@ -362,6 +382,11 @@ watch(
     &:nth-child(6) {
       background-image: url(@img/m-exit.png);
     }
+
+    a {
+      display: block;
+      width: 100%;
+    }
   }
 
   .is-member {

src/pages/benefits/index.vue

@@ -11,7 +11,7 @@
       <p class="l4">
         <button class="ptc-button ptc-button--stroke">Renewal</button>
       </p>
-      <p class="l5">Renewal management ></p>
+      <p class="l5" @click="$router.push('/renewal')">Renewal management ></p>
     </div>
     <div class="ptc-block">
       <div class="benefit benefit-a">

src/style/normalize.scss

@@ -109,6 +109,7 @@ img {
 a {
   outline: none;
   text-decoration: none;
+  color: inherit;
 }
 
 i {