---
# System prepended metadata

title: 第六堂：Vue Router
tags: [Vue 直播班 - 2021 夏季班]

---

---
tags: Vue 直播班 - 2021 夏季班
---

# 第六堂：Vue Router

報到碼：HWQBHZbmwcn0

## 課程提醒

- 本週日加碼
    - 第六週作業說明
    - 下午 13:30 至 16:00，伴你寫程式！

### 課程獎勵說明：

- 7/2 前 50%：超過 100 人挑戰成功，全班直播加碼授權一年
    - 前完成課程報到 -> 第四週主線
- 7/9 前 60%：菁英班直播(兩個主題) + Kuro（Composition API, JS 核心觀念）
    - 完成課程報到 -> 第六週主線 或 第五週主線 + 心得牆
- 7/9 前 80%：菁英班錄影(包含前一梯的菁英直播 3 個主題)
    - 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 100%：數位完賽獎狀 + 抽（008 天絕對看不完的 Vue.js 3.0 指南 3 本）
- 加碼獎勵：參加線上發表會前 5 名報到 + 發表者（008 天絕對看不完的 Vue.js 3.0 指南 一本）

### 作業繳交說明

- 所有繳交期限 7/25
- **最終延長繳交條件**：7/25 前完整繳交，可再延長至 8/21

課程範例版型：

- [https://hexschool.github.io/js-training-layout-1/](https://hexschool.github.io/js-training-layout-1/)
- [https://hexschool.github.io/js-training-layout-2/](https://hexschool.github.io/js-training-layout-2/)


### 本週作業

- [第六週主線任務：建立路由表](https://rpg.hexschool.com/training/18/task?type=detail&id=184)


## 主線說明：

- 為什麼要用 CLI
- CLI 環境安裝與了解
- 路由介紹


### 為什麼要用 CLI

- 不需從零建構環境，幾個選項後快速開發
- 快速建立「應用服務」 -> 單頁式應用程式
    - Router 管理由後端轉為前端
- 整合性的工具，開發更容易
    - 從 CDN 改為 NPM 統一管理


### CLI 環境安裝與了解

- 手動建置
    - Babel
    - Router → **Use history mode for router? False**
    - CSS 預處理 → node sass
    - Linter → 請至少選一個：Airbnb 是最嚴格的，不熟悉的可以選另外兩個
- 新增專案，不保存預設

運行方式：

- serve：運行開發環境
- build：編譯程式碼並釋出

資料夾結構說明：

- public：公開的檔案資料夾，可以放入不會被編譯的內容，裡面除了 index.html 外，其他都是直接被搬移的
- src：主要的開發環境


### Vue Cli 介面介紹

安裝插件：
- Vue loading
- vue axios
- Bootstrap Sass

@import '~bootstrap/scss/bootstrap';

### 環境變數

[https://cli.vuejs.org/zh/guide/mode-and-env.html](https://cli.vuejs.org/zh/guide/mode-and-env.html)

1. 新增 .env 檔案
2. 加入變數，API 網址及 Path


### Router

說明：Vue Router 不一定要搭配 Cli

https://next.router.vuejs.org/

元件與頁面連結的關係表
- 路由是什麼
    - 路由表
- 路由結構配置 → 基本頁面結構配置
    - 配置 router 檔案
    - router-view
    - router-link 連結方式
- 準備路由架構表
- 巢狀路由 → 巢狀連結
- 動態路由 → 動態參數
- this.$router.push(), back()
- default link


示範開發


1. 請先定好完整路由架構
2. 將**路由配置對應所有頁面，開發順序：**
    1. 先開頁面檔案
    2. 撰寫路由配置
    3. 補上 router-link
- 前端頁面
    - 首頁 /
    - 產品 /products → 產品列表
    - 產品 /product/:id → 動態路由
    - 購物車 /cart
- 登入頁面 /login
- **需驗證頁面：管理者端頁面** /admin/ —> 巢狀路由
    - 產品 /products
    - 訂單列表 /orders
    - 優惠券... /coupons

路由架構
- 首頁
    - 產品列表
    - 產品單一頁面
    - 購物車
    - 結帳頁面...
- 登入
- 後台
    - 產品管理列表
    - 優惠券列表
    - 訂單列表

## 補充：pathMatch

404 頁面
https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes


### 本週作業

- [第六週主線任務：建立路由表](https://rpg.hexschool.com/training/18/task?type=detail&id=184)

- 課後可參考章節：[Vue Router](https://courses.hexschool.com/courses/vue-2021/lectures/31862625)