今天原本預計要開始進入第一個功能的開發了，因為第一步當然就是點 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 的串接後，明天就可以來弄功能開發了，我們明天見！