Vue 與多頁 HTML 架構的差異與對應

一、傳統 HTML 網站 vs Vue 應用（SPA）

二、Vue 專案的常見結構

src/
├─ App.vue                # 主框架 (共用導覽列、頁尾)
├─ main.js                # 入口
├─ router/
│   └─ index.js           # 路由設定
├─ views/                 # 各個「頁面」
│   ├─ HomeView.vue
│   ├─ AboutView.vue
│   ├─ ContactView.vue
│   └─ ProductView.vue
└─ components/            # 可重用的元件
    ├─ Navbar.vue
    └─ Footer.vue

三、Vue Router：Vue 的「多頁面導航系統」

在傳統網站中：

<a href="page2.html" target="_blank">開新頁</a>

在 Vue 中：

<router-link to="/page2" target="_blank">開新頁</router-link>

在 router/index.js 中設定對應頁面：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Page2View from '../views/Page2View.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/page2', component: Page2View },
]

export default createRouter({
  history: createWebHistory(),
  routes
})

四、是否需要「很多 Vue 檔案」？

若你的專案原本有 10 個 HTML 頁面，那在 Vue 裡通常會有：

• 10 個「頁面元件（views）」；
• 若有共用區塊（例如下拉式谷歌翻譯、導覽列、頁尾、臉書留言外掛、社群轉貼分享的按鈕），則放在 components/。

這樣的架構可以：

• 讓共用部分只需維護一份；
• 頁面切換更快（無需重新載入整個頁面）；
• 方便日後擴充與管理。

五、簡單範例對照

原本的 HTML 架構：

index.html
about.html
contact.html

Vue 架構轉換後：

src/
  views/
    HomeView.vue
    AboutView.vue
    ContactView.vue
  components/
    Navbar.vue
  App.vue

共用導覽列範例：

<!-- Navbar.vue -->
<nav>
  <router-link to="/">首頁</router-link>
  <router-link to="/about">關於我們</router-link>
  <router-link to="/contact">聯絡我們</router-link>
</nav>

六、結論整理