路由

Nuxt 的核心功能之一是檔案系統路由。在 pages/ 目錄內的每個 Vue 檔案都會建立對應的 URL（或路由），該 URL 會顯示檔案的內容。透過為每個頁面使用動態匯入，Nuxt 利用程式碼分割來為請求的路由傳送最少量的 JavaScript。

頁面

Nuxt 路由基於 vue-router，並根據在 pages/ 目錄中建立的每個元件的檔名生成路由。

這個檔案系統路由使用命名慣例來建立動態和巢狀路由

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

導覽

<NuxtLink> 元件會在頁面之間建立連結。它會渲染一個 <a> 標籤，其 href 屬性設定為頁面的路由。一旦應用程式水合（hydrated）完成，頁面轉換將透過 JavaScript 更新瀏覽器 URL 來執行。這可以防止頁面完全重新整理，並允許動畫轉換。

當 <NuxtLink> 在客戶端進入視窗時，Nuxt 將會自動預先提取連結頁面的元件和有效載荷（產生的頁面），從而加快導覽速度。

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

路由參數

在 Vue 元件的 <script setup> 區塊或 setup() 方法中可以使用 useRoute() composable 來存取目前的路由詳細資訊。

<script setup lang="ts">
const 
route
 = 
useRoute
()

// When accessing /posts/1, route.params.id will be 1
console
.
log
(
route
.
params
.
id
)
</script>

路由中介層

Nuxt 提供一個可自訂的路由中介層框架，您可以在整個應用程式中使用它，非常適合提取您想要在導覽到特定路由之前執行的程式碼。

路由中介層有三種類型

1. 匿名（或內聯）路由中介層，直接在它們被使用的頁面中定義。
2. 具名路由中介層，放置在 middleware/ 目錄中，當在頁面上使用時，將透過非同步匯入自動載入。（注意：路由中介層名稱會標準化為 kebab-case，因此 someMiddleware 會變成 some-middleware。）
3. 全域路由中介層，放置在 middleware/ 目錄中（帶有 .global 後綴），將在每次路由變更時自動執行。

一個 auth 中介層保護 /dashboard 頁面的範例

export default 
defineNuxtRouteMiddleware
((
to
, 
from
) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (
isAuthenticated
() === false) {
    return 
navigateTo
('/login')
  }
})

路由驗證

Nuxt 在每個您想要驗證的頁面中，透過 definePageMeta() 中的 validate 屬性提供路由驗證。

validate 屬性接受 route 作為參數。您可以傳回布林值來判斷這是否為使用此頁面渲染的有效路由。如果您傳回 false，且找不到其他符合的路由，則會導致 404 錯誤。您也可以直接傳回具有 statusCode/statusMessage 的物件，立即回應錯誤（不會檢查其他符合的路由）。

如果您有更複雜的使用案例，則可以使用匿名路由中介層代替。

<script setup lang="ts">
definePageMeta
({
  
validate
: async (
route
) => {
    // Check if the id is made up of digits
    return typeof 
route
.
params
.
id
 === 'string' && /^\d+$/.
test
(
route
.
params
.
id
)
  }
})
</script>