iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
2
Modern Web

從零開始的個人化記帳程式開發系列 第 8

記帳程式 (08):vue-router 與 menu 串接

  • 分享至 

  • xImage
  •  

今天原本預計要開始進入第一個功能的開發了,因為第一步當然就是點 menu 的地方要可以連過去「月記帳本」這個 route,但發現昨天在左側選單的部分只暫時做出了畫面,目前還沒有與 router 的連動,所以今天花了比較多時間在調整這個部分。

vue-router 調整

原始碼

首先在 @/router.js 的地方加上了幾個主要的 route:

routes: [
  {
    path: '/',
    name: 'home',
    component: () => import('./views/Home'),
    children: [
      {
        path: '/billing',
        name: 'billing',
        component: () => import('./views/Billing'),
        meta: { title: '月記帳本', icon: 'el-icon-notebook-1' }
      },
      {
        path: '/account',
        name: 'account',
        component: () => import('./views/Account'),
        meta: { title: '帳戶管理', icon: 'el-icon-money' }
      },
      {
        path: '/charts',
        name: 'charts',
        component: () => import('./views/Charts'),
        meta: { title: '圖表分析', icon: 'el-icon-pie-chart' }
      }
    ]
  }
]

menu 調整

原始碼

再來調整昨天在 layout 中建好的 Sidebar,調整 @/layout/components/Sidebar.vue 這隻檔案:

首先利用 computed 取出剛剛上面在 vue-router 中設定好的幾個 route 取名為 menuList

computed: {
  menuList() {
    return this.$router.options.routes[0].children
  }
},

再來就能利用 menuList 在 HTML 結構的地方利用 v-for 一次寫出所有的 el-menu-item,並且使用剛才上面中,在 vue-router 中設定的 meta 資訊,直接透過 router.js 這隻檔案管理要載入的「icon」、「標題」,之後就可以不太需要動這隻 menu 的檔案。

<el-menu
  :default-active="activeIndex"
  @select="handleItemSelect"
>
  <template v-for="menuItem in menuList">
    <el-menu-item
      :index="menuItem.name"
      :key="menuItem.name"
    >
      <i :class="['app-sidebar__icon', `${menuItem.meta.icon}`]" />
      <span>{{menuItem.meta.title}}</span>
    </el-menu-item>
  </template>
</el-menu>

後記

今天原本還想調整整個布局的主題色的,但不小心試著試著就快接近 deadline 了。

只好先把今天的進度紀錄一下,在完成 router 與 menu 的串接後,明天就可以來弄功能開發了,我們明天見!


上一篇
記帳程式 (07):記帳程式畫面布局
下一篇
記帳程式 (09):基本功能開發 - 月記帳本 Part.1
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
挖洗菜呱
iT邦新手 5 級 ‧ 2019-09-25 10:52:40

每天看到發文時間接近12點都覺得猛猛的

ckchuang iT邦新手 4 級 ‧ 2019-09-25 11:39:10 檢舉

裸上的鐵人賽真滴抖/images/emoticon/emoticon46.gif

【**此則訊息已被站方移除**】

我要留言

立即登入留言