建立 2026-09-15 更新 2026-09-15

Vue Router

Vue Router 是官方路由。它讓 URL 對應到元件，點連結只換頁面區塊、不整頁刷新。這就是單頁應用（SPA）的導覽層。

最小設定

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './pages/Home.vue'
import About from './pages/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/users/:id', component: User, props: true },
  ],
})

createApp(App).use(router).mount('#app')

App.vue 放出口：

<template>
  <nav>
    <RouterLink to="/">首頁</RouterLink>
    <RouterLink to="/about">關於</RouterLink>
  </nav>
  <RouterView />
</template>

RouterLink 會渲染成 <a> 並攔截點擊；RouterView 顯示目前路由對到的元件。動態段 :id 在元件裡用 useRoute().params.id 讀取。

程式導向與守衛

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/about')
router.push({ name: 'user', params: { id: 1 } })

進頁前檢查登入，用導航守衛：

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return '/login'
  }
})

巢狀路由（layout + 子頁）、懶載入（() => import('./Page.vue')）、404 用 /:pathMatch(.*)*。細節見官方指南。

Vue Router

最小設定

程式導向與守衛

推薦影音

Vue JS 3 Tutorial #8 — The Vue Router

State, Routing, and the Future of Vue