閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：利用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」的課程嘗試在30天內打造網路商城。

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌心得

本來是使用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」，但他的前面講的太難了，因此目前依然是按照六角學院的「Vue出一個電商網站」為教材

▌本次目標

增加子路徑

▌作法

• card-index：外面一定要包div
  • router-link是用來點的
  • router-view才是可以用來看的

<template>
<div>
    <router-link to="/card_index/">CARD1</router-link> 
    <router-link to="/card_index/card2">/CARD2</router-link>
    <router-link to="/card_index/card3">/CARD3</router-link>
<div class="d-flex justify-content-center"> 
    <div class="card" style="width: 18rem;">
       <router-view></router-view>  
    </div>    
</div>
</div>
</template>

• child：外面一定要包div

<template>
<div>
<div class="card-body">
    <h5 class="card-title">這是卡片1</h5>
    <p class="card-text">這是卡片，裡面有很多東西</p>
    <a href="#" class="btn btn-primary">Press</a>
</div>
</div>
</template>

• Rounter的設定檔
  • 增加children當作子路徑
  • children的path不需要/
  • children的path如果是空白，就會繼承父路徑

export default new Router({
  routes: [{
    path: '/index',
    name: 'index',
    component: index
  }, {
    path: '/about',
    name: 'about',
    component: about
  }, {
    path: '/card_index',
    name: 'card_index',
    component: card_index,
    children: [{  //增加children
      path: '',
      name: 'card',
      component: card
    }, {
      path: 'card2',
      name: 'card2',
      component: card2
    }, {
      path: 'card3',
      name: 'card3',
      component: card3
    }]
  }, {
    path: '/sign',
    name: 'sign',
    component: sign
  }]
})