Vue3 路由系統（Vue Router 4）── 404 頁面處理

簡介

在單頁應用（SPA）中，路由負責將網址映射到對應的元件。當使用者輸入不存在的路徑或點擊錯誤的連結時，若沒有適當的處理，畫面會呈現空白或錯誤訊息，嚴重影響使用體驗與 SEO。
透過 Vue Router 4 的 catch‑all (萬用路由) 以及全域守衛，我們可以在 Vue3 專案裡快速、優雅地捕捉「找不到頁面」的情況，顯示自訂的 404 頁面，甚至導向使用者回首頁或其他安全路徑。

本篇文章將從概念說明、實作範例、常見陷阱與最佳實踐，帶你完整掌握 404 頁面的處理方式，適合 初學者 以及 中級開發者 在正式專案中直接使用。

核心概念

1. Catch‑all 路由（萬用路由）

在 Vue Router 4 中，使用 path: '/:pathMatch(.*)*' 可以匹配所有未被其他路由捕捉的 URL。這個路由必須放在路由表的最後，否則會把所有請求都導向 404。

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

const routes = [
  { path: '/', name: 'home', component: HomeView },
  // 其他業務路由…
  // ------------------- 404 萬用路由 -------------------
  {
    path: '/:pathMatch(.*)*',   // 捕捉所有未匹配的路徑
    name: 'NotFound',
    component: NotFoundView,
    // optional: 可以在 meta 裡放置自訂資訊
    meta: { requiresAuth: false }
  }
]

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

export default router

重點：萬用路由必須寫在 routes 陣列的最後，否則會「遮蔽」後面的所有路由。

2. 404 元件的設計

404 頁面不只是顯示「找不到」的文字，最好提供導覽選項（回首頁、搜尋、聯絡客服）以及友善的 UI，降低使用者離開網站的機率。

<!-- src/views/NotFoundView.vue -->
<template>
  <section class="not-found">
    <h1>404 – 找不到頁面</h1>
    <p>您所查詢的頁面可能已被移除、名稱變更，或是輸入錯誤。</p>
    <router-link to="/" class="btn-primary">回首頁</router-link>
    <router-link to="/search" class="btn-secondary">搜尋內容</router-link>
  </section>
</template>

<script setup>
// 可以在這裡加入 SEO meta 標籤或是 GA 事件追蹤
</script>

<style scoped>
.not-found { text-align:center; margin-top:4rem; }
.btn-primary, .btn-secondary { margin:1rem; padding:0.6rem 1.2rem; }
</style>

3. 全域守衛（Navigation Guard）搭配 404

有時候我們想在所有路由切換前先檢查「路由是否真的存在」或是「使用者是否有權限」後才決定是否跳到 404。router.beforeEach 提供了這樣的彈性。

// router/index.js（接續前面的程式碼）
router.beforeEach((to, from, next) => {
  // 假設從後端取得可訪問的路由清單
  const allowedRoutes = ['home', 'about', 'profile']
  if (to.name && !allowedRoutes.includes(to.name) && to.name !== 'NotFound') {
    // 若路由名稱不在允許清單且不是 404 本身，導向 404
    next({ name: 'NotFound' })
  } else {
    next()
  }
})

4. 動態載入 404 組件（Lazy Loading）

在大型專案中，將 404 元件 懶加載 可減少首屏載入的體積。只要在路由設定中使用 import() 即可。

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/views/NotFoundView.vue')   // 懶加載
}

5. 針對 SEO 的 404 處理

如果你的 SPA 需要被搜尋引擎抓取，建議在伺服器端回傳 正確的 HTTP 404 狀態碼。Vue Router 本身只負責前端顯示，必須配合 SSR（Nuxt、ViteSSR） 或是 Netlify/Vercel 的 rewrite 規則 來實現。

# netlify.toml 範例
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# 再加一個 404 例外
[[redirects]]
  from = "/404"
  to = "/404.html"
  status = 404

提示：在 NotFoundView.vue 中使用 useHead（或 vue-meta）設定 <title>、<meta name="robots" content="noindex">，避免搜尋引擎將錯誤頁面編入索引。

常見陷阱與最佳實踐

陷阱	說明	解決方式
萬用路由位置錯誤	放在路由表前面會導致所有路由都匹配到 404。	務必放在最後，或使用 `router.addRoute` 動態加入。
忘記設定 `pathMatch`	使用 `/:catchAll(.*)` 會在 Vue Router 4 報錯。	正確寫法是 `/:pathMatch(.)`。
404 元件未懶加載	大型專案會把 404 元件一起打包，增加 bundle 大小。	使用 `component: () => import('...')` 懶加載。
未處理子路由的 404	嵌套路由若子路由找不到，父層仍會渲染，導致 UI 不完整。	在子路由表同樣加入萬用路由，或在父層使用 `<router-view v-slot="{ Component }">` 判斷。
SEO 失敗	前端僅顯示 404，卻回傳 200，搜尋引擎會認為頁面正常。	配合 SSR 或 CDN 的 rewrite 規則回傳正確的 404 狀態碼。

最佳實踐

統一管理 404 元件：將 404 頁面抽離成單一元件，並在 router/index.js 中引用，方便未來樣式或行為統一修改。
加入使用者導向：提供「回首頁」與「搜尋」等 CTA，減少使用者因找不到頁面而離站。
結合全域守衛：在需要權限驗證的專案，先檢查權限再決定是否跳到 404，避免「未授權」直接顯示 404。
記錄 404 事件：使用 Google Analytics、Amplitude 或自建日誌，統計哪些路徑最常被誤點，協助改善導覽結構。

// 例：在全域守衛中記錄 404
router.beforeEach((to, from, next) => {
  if (to.name === 'NotFound') {
    // 假設有一個 logService
    logService.track('404', { path: to.fullPath, referrer: from.fullPath })
  }
  next()
})

實際應用場景

場景	為什麼需要 404 處理	具體實作
電商平台	商品下架或網址改寫後，舊連結仍可能被外部鏈接引用。	在 `router.beforeEach` 中檢查商品 ID 是否存在，若不存在則 `next({ name: 'NotFound' })`，同時顯示相關商品推薦。
部落格/內容網站	SEO 友好，搜尋引擎會抓取舊文章網址。	透過 SSR 回傳 404 狀態碼，並在 404 頁面提供搜尋框與熱門文章連結。
企業內部系統	權限變更後，使用者可能仍能手動輸入舊路由。	在全域守衛先驗證角色，若無權限則導向 404（或 403）頁面，避免資訊洩漏。
多語系網站	同一內容在不同語系下有不同路由，缺少對應語系時會出錯。	在路由表中為每個語系都加入相同的萬用路由，並根據 `i18n` 設定自動導向相應語系的 404。

總結

Vue Router 4 提供了簡潔的 catch‑all 語法 /:pathMatch(.*)*，讓我們能在單頁應用中快速捕捉所有未匹配的 URL。
建立 友善的 404 元件，結合 CTA、懶加載與 SEO 設定，可顯著提升使用者體驗與搜尋引擎友好度。
全域守衛 與 事件記錄 能讓 404 處理更具彈性，適用於權限驗證、動態路由或統計分析。
記得 將萬用路由放在最後、使用正確的 pathMatch 正則、配合伺服器或 CDN 回傳正確的 HTTP 404 狀態碼，才能避免常見陷阱。

掌握以上技巧後，你就能在 Vue3 專案中自信地處理所有「找不到」的情況，讓使用者即使走錯路也能順利回到正確的旅程。祝開發順利，期待看到你打造的精緻 404 頁面！