點擊上方的語言選單以切換語言

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

此頁面是根據本專案中名為HTML 與 Vue 的結構差異說明（含三種架構示意圖）的頁面延伸出來的教學筆記，可供想做前端的朋友們參考。

結論先說： Vue 裡面多檔案（多 .vue） ≠ 傳統 HTML 的「多頁面」。 Vue 採用的是單頁應用（SPA）架構，用多個 view 元件取代多個 HTML 檔案。

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

項目	傳統 HTML 網站	Vue 應用（SPA）
檔案結構	每個頁面是一個 `.html` 檔案	整個網站通常只有一個 `index.html`
導覽方式	`<a href="page2.html">`	`<router-link to="/page2">`
頁面刷新	每次重新載入整個頁面	不會重新載入，只切換「視圖」
組件數量	每個 HTML 為獨立頁面	一個頁面可由多個 Vue 元件組成
維護方式	分頁維護、結構分散	集中式管理、邏輯統一

二、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>

六、結論整理

問題	解答
能否用 Vue 製作十頁以上網站？	✅ 可以，非常常見
是否需要十幾個 Vue 檔案？	✅ 通常會有十幾個「view」檔案，但共用元件可重用
是否等同於十個 HTML？	❌ 不同概念，只需一個 `index.html`
主要好處	共用集中、切換快速、邏輯一致
壞處	❌ 無法像傳統 HTML 網站那樣直接在新視窗中開啟多個頁面進行對比，SPA 無法同時顯示多個頁面視圖。