摘要

Vue Router 是 Vue.js 的官方路由管理器，用於建構單頁應用程式 (SPA)，讓使用者在不同「頁面」間切換而無需重新載入整個網頁。

定義與說明

它會將瀏覽器的 URL 與你的 Vue 元件進行映射。當 URL 改變時，Vue Router 會自動渲染對應的元件到指定的位置 <router-view>。我們使用 <router-link> 來建立導航連結。

實作範例

Vue Router 基本配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') }
];

const router = createRouter({ history: createWebHistory(), routes });
export default router;

App.vue 中的使用

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">首頁</router-link> |
    <router-link to="/about">關於</router-link>
  </nav>
  <!-- 路由匹配的元件將會渲染在這裡 -->
  <router-view></router-view>
</template>

結論

Vue Router 是建構任何非單一畫面的 Vue 應用的標準選擇。它透過 <router-link> 和 <router-view> 兩個核心元件，簡潔地實現了前端路由功能。

Vue Router SPA 路由管理