---
tags: Vue 實戰班
---

# 第六週 Vue Router

主線任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2FvOkLy5TfTaenEY8nCY5IkA

小組任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2FZezpveVFRhOXf6vyxNYOlw

## 前置作業

- 請先參考 Vue Cli 的安裝課程，[課程連結](/nBnlX-8bR2CB6sPWeEirWA)
- VSCode 套件推薦：[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
- 安裝 Vue Cli 環境

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

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

示範安裝套件：
* Vue loading
* vue axios
* Bootsrap CSS

## Router

- 路由是什麼
- 檔案與路由的關係
- 如何建置路由檔案
- 檔案：router/index.js
- 元件：router-view
- 元件：router-link

#### Router 運用方法

- 基礎路由頁面
- 巢狀連結
- 動態參數
- Router 方法
- 預設連結

## 登入驗證技巧

管理頁面：
- 實作登入頁面 login
- 驗證製作
- 內頁的測試