Vue Router 新手指南：設置 404 錯誤頁面

更新日期： 2025 年 1 月 1 日

在 Web 應用開發中，404 錯誤頁面是必不可少的一部分。

它可以幫助用戶在訪問未知路徑時，提供友好的提示並引導他們返回正確的頁面。

本指南將通過一段簡單的 Vue Router 配置代碼，教你如何設置 404 錯誤頁面並理解相關的運作邏輯。

什麼是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理工具，用於構建單頁應用程序（SPA）的路由系統。

它可以根據 URL 的變化動態加載不同的組件，實現無刷新頁面跳轉。

配置 404 錯誤頁面的完整代碼

以下是一段用於處理 404 錯誤頁面的路由配置代碼：

import { createRouter, createWebHistory } from "vue-router";
import NotFoundPage from "./components/NotFoundPage.vue";

const routes = [
  { path: "/:pathMatch(.*)*", component: NotFoundPage }, // 通配符路由
];

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

export default router;

分步解釋

引入必要的工具和組件

import { createRouter, createWebHistory } from "vue-router";
import NotFoundPage from "./components/NotFoundPage.vue";

1.1 createRouter

• 作用：Vue Router 提供的核心 API，用於創建路由器實例，管理路由邏輯。
• 功能：定義路徑、導航守衛、歷史模式等。

1.2 createWebHistory

• 作用：設置 HTML5 History 模式。
• 特點：URL 更加簡潔（例如 /about），不會包含 #（如 /about#）。
• 適用場景：適合現代的單頁應用程序，需伺服器支持配置。

1.3 NotFoundPage

• 作用：導入自定義的 Vue 組件，作為 404 錯誤頁面。
• 組件內容：用於顯示友好的錯誤提示，例如 “Page Not Found” 或返回首頁的鏈接。

定義路由表

const routes = [
  { path: "/:pathMatch(.*)*", component: NotFoundPage }, // 通配符路由
];

2.1 路由表的結構

• 定義：routes 是一個數組，包含多個路由對象。
• 每個路由對象的屬性：
  • path：匹配的 URL 路徑。
  • component：當路徑匹配時加載的 Vue 組件。

2.2 通配符路由

• path: "/:pathMatch(.*)*"：
  • 使用正則表達式匹配所有未定義的路徑。
  • :pathMatch 是一個動態參數，(.*)* 表示匹配多層嵌套路徑。
  • 例如：
    • /random-page：匹配 /random-page。
    • /deep/nested/page：匹配 /deep/nested/page。
• 用於處理 404：
  • 當用戶訪問的路徑未定義在路由表中時，這條通配符路由會被觸發。
  • 將未定義路徑引導到自定義的 404 錯誤頁面。

創建路由器實例

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

3.1 history

• 作用：設置路由的歷史模式。
• 常見選項：
  • createWebHistory()：使用 HTML5 History 模式。
  • createWebHashHistory()：使用哈希模式，URL 帶有 #。

3.2 routes

• 作用：傳入定義的路由表。
• 功能：讓路由器知道如何根據路徑動態加載對應的組件。

導出路由器實例

export default router;

• 作用：將 router 導出，供其他文件（如 main.js）使用。
• 示例： 在 main.js 文件中引入並注冊到 Vue 應用：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router); // 注冊路由器
app.mount("#app");

404 錯誤頁面的運作邏輯

1. 用戶訪問某個 URL。
2. Vue Router 嘗試在路由表中匹配該路徑。
3. 如果沒有找到匹配的路徑：
   • 觸發通配符路由。
   • 加載 NotFoundPage 組件。
4. 在 404 頁面顯示錯誤提示。

為什麼選擇 HTML5 History 模式？

1. URL 更簡潔：無需 # 符號，URL 更像傳統網站。
2. SEO 友好：更適合搜索引擎優化（SEO）。
3. 伺服器支持：需要伺服器配置以處理返回 index.html。

應用場景

1. 處理未知路徑：
   • 用戶輸入錯誤的 URL 時顯示自定義錯誤信息，而非空白頁或瀏覽器默認的 404 錯誤。
2. 提升用戶體驗：
   • 提供返回首頁的鏈接，幫助用戶快速導航到正確的頁面。

結語

本文介紹了如何使用 Vue Router 配置 404 錯誤頁面，並詳細解釋了每個部分的邏輯和功能。

通過這種方式，你可以為應用添加一個友好的錯誤處理機制，讓用戶在訪問未知路徑時獲得更好的體驗。