:::info
本文件連結：https://hackmd.io/PAdQKvB0TEeXy0oFhMjcVg
此為 2025 Vue3 前端新手營課程資料，相關資源僅授權給該課程學員。
:::

# 第五週：Vue Router 與 Todolist 全攻略

- 提醒老師錄影

### 額外課程介紹：
- JS 直播班：https://www.hexschool.com/courses/js-training.html
- JS&React 直播班：https://www.hexschool.com/courses/js-react-training-2025.html

## 今日主要主題

- Router

### Router

- 路由是什麼（路由表概念）

npm create vite@latest

- 路由結構配置 → 基本頁面結構配置
- 如何配置 router 檔案
- router-view
- router-link 連結方式

## 路由設定要點：

原本是使用 createWebHistory，當選擇此模式會使得無法部署至 GitHub Pages

如果有辦法調整 Server 環境，則可以參考此[文件](https://router.vuejs.org/zh/guide/essentials/history-mode.html#HTML5-%E6%A8%A1%E5%BC%8F)的方法。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  ...
})

如果要部署至 GitHub Pages，則可以建議換成 **createWebHashHistory** 的模式，`router/indexs.js`。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  ...
})

## 路由基本手法

1. 開新頁面 XxxView.vue
2. 撰寫路由表 router/index.js
3. 提供連結方法 routerLink

## 常見路由結構

1. 基本路由
2. 巢狀路由 → 主要用為版型重複運用
- 巢狀路由 → 巢狀連結

router/index.js

{
    path: '/nest-router',
    component: () => import('../views/NestRouter.vue'),
    children: [
      // ...
    ]
  }

vue file

<template>
  <h1>巢狀路由</h1>

  <RouterView />
</template>

3. 動態路由（本次作業不會用到，但業界常見）
- 動態路由 → 動態參數([範例網址](https://randomuser.me/api?seed=1))

router/index.js

{
  path: ':id',
  component: () => import('../views/DynamicRouter.vue')
}

vue file

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log('router:', route);
const { id } = route.params; // 網址上的值
</script>

## 路由方法與狀態

- 路由狀態 useRoute
- [https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化](https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96)

//  DynView.vue


<template>
    <h1>編號：{{ id }}</h1>
    {{ person }}
</template>

<script setup>
import { useRoute} from 'vue-router'
import { ref,onMounted} from 'vue';
import axios from "axios"
const route = useRoute()
console.log('router:', route);
const { id } = route.params; // 網址上的值

const person = ref("")
console.log(person.value);
onMounted(async () => {
  const data = await axios.get(`https://randomuser.me/api/?seed=${id}`);
  person.value = data.data.results[0];
});
</script>

- 路由方法 useRouter

## router.push 轉頁

import { useRoute,useRouter} from 'vue-router'
const router = useRouter();
//router.push('/about'); 

- 404

    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

- default link

{
 path: '*',
redirect: '/',
},

## 定義自己的路由配置

1. 請先定好完整路由架構
2. 將路由配置對應所有頁面，開發順序：
1. 先開頁面檔案
2. 撰寫路由配置
3. 補上 router-link
- 登入頁面 /login (不驗證)
- 前端頁面 (需驗證)
- todo

## 補充：pathMatch

404 頁面：https://router.vuejs.org/guide/essentials/dynamic-matching#Catch-all-404-Not-found-Route

## 最終任務：

- 設計稿：https://www.figma.com/design/MFSk8P5jmmC2ns9V9YeCzM/TodoList?node-id=0-1&t=KzEgeE3s3r6JIPh6-1
- CSS 範例：https://codepen.io/hexschool/pen/qBzEMdm
- 同時挑戰證書任務：
- [最終挑戰 - Todolist 新手證書任務](https://rpg.hexschool.com/#/training/12062817613334763749/board/content/12062817613334763750_12062817613334763761?tid=12062817613343793193)
- [最終挑戰 - Todolist API 整合證書任務](https://rpg.hexschool.com/#/training/12062817613334763749/board/content/12062817613334763750_12062817613334763761?tid=12062817613343793192)

> 提醒：
> 最終證書作業繳交截止日：9/7（日）
完課證書發送時間：9/26（五）前
影音觀看期限：直播錄影將為您保留半年，期限為 2026/03/31