To Do Calendar - Day5 頁面串接

2022/04/22
1-minute read
SideProject

終於可以跟 Vue CLI 預設的 HelloWorld.vue 掰掰，開始建立自己的頁面了！

分頁元件拆解

配置巢狀路由

在 src/component/pages 下分別新增以下檔案
- index.vue（首頁）
- innerPage.vue（內頁）
在 src/component/tabs 下分別新增以下檔案
- todolists.vue（待辦事項分頁）
- habitTracker.vue（原子習慣分頁）
- notes.vue（備忘錄分頁）

在 src/router/index.js 中載入自定義的分頁元件

import Index from "@/components/pages/index";
import InnerPage from "@/components/pages/innerPage";
import Notes from "@/components/tabs/notes";
import Todolists from "@/components/tabs/todoLists";
import HabitTracker from "@/components/tabs/habitTracker";

加上 linkActiveClass:‘active’
在需要巢狀路由的 innerPage 路由下新增 children 陣列

新增 innerPage 的子元件的路徑與對應元件

      export default new VueRouter({
      linkActiveClass:'active',
      routes: [
          {
              name: 'index',
              path: '/',
              component: Index
          },
          {
              name: 'innerPage',
              path: '/innerPage',
              component: InnerPage,
              children: [
                  {
                      name: 'todoLists',
                      path: 'todoLists',
                      component: TodoLists
                  },
                  {
                      name: 'habitTracker',
                      path: 'habitTracker',
                      component: HabitTracker
                  },
                  {
                      name: 'notes',
                      path: 'notes',
                      component: Notes
                  }
              ]
          }
      ]
  });

Info

linkActiveClass：使當前的 link 添加指定樣式，用來標示目前所在的頁面。

Info

子元件 path 若為空，父元件預設將會帶入這個子元件。

使用 router-link + router-view 切換分頁

router-view：呈現路由配置元件
router-link：路由路徑

在 innerPage.vue 加入 Bootratrap 的導覽卡片元件
用 <router-link> 取代在 nav-item 中的 <a> 連結
在 <router-link> 加上 to 屬性與指定路徑，建立路由連結

在 card-body 加入 <router-view/>，渲染當前路徑指定的元件

<section class="card text-center">
    <div class="card-header">
      <section class="text-right text-success h4">User</section>
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <router-link class="nav-link" to="/innerPage/habitTracker">Habit trackers</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/innerPage/todoLists">Todo lists</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/innerPage/notes">Notes</router-link>
        </li>
      </ul>
    </div>
    <section class="card-body">
      <h1 class="card-title">tab</h1>
      <router-view/>
    </section>
  </section>