在魔法學院裡,巫師們不可能永遠只待在大廳(App.vue)。有時候要去「點餐之塔」下訂單,有時候要前往「結算之室」檢視總金額,甚至還可能需要直接打開某篇卷軸(文章頁)。
如果每次切換場景都得從大廳走起,會非常低效。於是我們需要傳送門(Vue Router):
精準定位:讓使用者能直接輸入網址,立刻抵達對應場景。
/order → 點餐頁/summary → 訂單總覽頁攜帶符文(參數):網址能帶上變數,就像通關密語一樣,打開指定內容。
/article/42 → 打開編號 42 的卷軸/order/abc123 → 進入指定的訂單詳情這樣一來,不管是使用者手動輸入網址、點連結,還是從其他魔法卷軸傳送過來,都能直達目的地。
Vue Router 是 Vue 官方提供的「路徑管理法術」。它的本質是一個 路由表(Route Table):把 路徑 與 組件 綁在一起。
/order → Vue Router 就召喚 OrderPage.vue
/summary → Vue Router 就召喚 SummaryPage.vue
/article/:id → Vue Router 就召喚 ArticlePage.vue,並附帶 id 參數給你使用三個關鍵法則:
<router-link> 在頁面間穿梭我們可以把這個情境一樣用時序圖畫出來比較好理解~~

{ path: '/order', component: OrderPage }
{ path: '/summary', component: SummaryPage }
/order 就會看到點餐畫面。/summary 就會看到統計畫面。{ path: '/article/:id', component: ArticlePage }
:id 是一個動態符文(動態參數)。/article/42 → 可以在 ArticlePage 裡透過 route.params.id 拿到 42。我們根據上面提到的需求-> 程式拆解
可以寫成這樣的程式流程圖
程式流程圖很適合幫我們理解流程控制或是路由轉換的圖像化

npm install vue-router
import { createRouter, createWebHistory } from 'vue-router'
import OrderPage from '../pages/OrderPage.vue'
import SummaryPage from '../pages/SummaryPage.vue'
import ArticlePage from '../pages/ArticlePage.vue'
const routes = [
  { path: '/order', component: OrderPage },
  { path: '/summary', component: SummaryPage },
  { path: '/article/:id', component: ArticlePage },
]
export const router = createRouter({
  history: createWebHistory(),
  routes,
})
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
<template>
  <nav>
    <router-link to="/order">點餐之塔</router-link>
    <router-link to="/summary">結算之室</router-link>
  </nav>
  <router-view />
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.params.id
</script>
<template>
  <h2>你正在閱讀卷軸 #{{ id }}</h2>
</template>
Vue Router 就像是魔法學院的傳送門法陣,能讓使用者不必從頭走流程,而是直達任意場景。
好處:
注意事項:
今天你會了「傳送門法陣」的基礎概念,讓系統不再只是一條路,而是能分岔、跳躍、直達的冒險地圖。
明天我們會繼續擴充這些傳送法術,讓飲料學院更有「地圖感」,不再迷路。
我們明天再把系統拆分vue-router介面,並且看看要怎麼分配路徑吧!!