今天我們要學習兩個進階的路由技巧：路由中介軟體 (Route Middleware) 和 路由驗證 (Route Validation)。

1. 路由中介軟體：頁面的保全人員

你可以把「中介軟體」想像成是每個房間門口的保全人員。

在使用者進入一個頁面之前，這位保全會先攔下來檢查，看看他/她是否符合通行資格。最經典的例子就是：「這個頁面需要登入才能看！」

如何建立保全 (Middleware)？

建立檔案

在 middleware/ 資料夾中建立一個檔案，例如 auth.ts。

(檔案名稱會被轉換成小寫橫槓命名，例如 authMiddleware → auth-middleware)

撰寫規則

在檔案中，我們定義檢查的邏輯。如果檢查不通過，就用 navigateTo 把它導向登入頁。

middleware/auth.ts

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // 這裡只是一個範例，實際情況會是檢查 cookie 或 token
  const hasLoggedIn = false;

  if (!hasLoggedIn) {
    // 如果沒登入，就強制導向到登入頁
    return navigateTo('/login');
  }
})

派遣保全

在需要保護的頁面 (例如 dashboard.vue) 中，使用 definePageMeta 來派遣這位保全。

pages/dashboard.vue

<script setup>
definePageMeta({
  // 告訴 Nuxt：進入此頁面前，必須先通過 'auth' 這個保全的檢查
  middleware: 'auth'
})
</script>

<template>
  <h1>這是您的會員儀表板</h1>
</template>

2. 路由驗證：通行規則檢查員

「路由驗證」的任務更單純，它像是規則檢查員，專門用來檢查網址參數的格式是否正確。

例如，在 pages/posts/[id].vue 中，我們預期 id 應該是數字。如果有人訪問 /posts/hello，這顯然不合理，應該直接給他一個 404 找不到頁面的錯誤。

如何設定規則 (Validation)？

直接在頁面中使用 definePageMeta 的 validate 屬性。

pages/posts/[id].vue

<script setup>
definePageMeta({
  validate: (route) => {
    // 檢查 route.params.id 是否完全由數字組成
    const isIdNumeric = /^\d+$/.test(route.params.id);
    return isIdNumeric; // 如果是數字，回傳 true (通過)；否則回傳 false (顯示 404)
  }
})
</script>

<template>
  <p>文章 ID: {{ $route.params.id }}</p>
</template>

今日總結

今天我們學會了保護網站的兩大招式：

中介軟體 (保全)：檢查權限，例如「你登入了嗎？」。

負責將不符資格的人引導到別處。

路由驗證 (規則檢查員)：檢查格式，例如「這個 ID 是數字嗎？」。

負責擋掉格式不符的無效訪問。

學會了這兩招，你的網站不僅有結構，還有了智慧和安全性，變得更加專業和穩固！

特性	中介軟體 (Middleware)	路由驗證 (Validation)
主要用途	權限檢查	格式驗證
檢查對象	使用者狀態	網址參數
失敗行為	導向其他頁面	顯示 404 錯誤
設定位置	middleware/ 資料夾	頁面檔案內
使用場景	登入驗證、角色權限	ID 格式、參數合法性

中介軟體範例

• 會員專區登入檢查
• 管理員權限驗證
• 付費內容存取控制
• 地區限制檢查

路由驗證範例

• 文章 ID 必須是數字
• 用戶名格式驗證
• 日期格式檢查
• 語言代碼驗證