iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1
自我挑戰組

三十天用Vue.jS打造一個網路商城系列 第 7

Day7:開始製作自己的第一個SPA網站(2)——添加子路徑

  • 分享至 

  • xImage
  •  

閱讀前,建議可以參考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
  }]
})


上一篇
Day6:開始製作自己的第一個SPA網站
下一篇
Day8:利用動態路由獲取API
系列文
三十天用Vue.jS打造一個網路商城30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言