路由

Nuxt 檔案系統路由會為 pages/ 目錄中的每個檔案建立路由。

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

頁面

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

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

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

在文件 > 指南 > 目錄結構 > 頁面中閱讀更多資訊。

導航

元件連結頁面之間。它會渲染一個標籤，並將 href 屬性設定為頁面的路由。一旦應用程式被 hydration，頁面過渡將透過 JavaScript 更新瀏覽器 URL 來執行。這可以防止頁面完整重新整理，並允許動畫過渡。

當在客戶端進入視口時，Nuxt 會自動預先獲取連結頁面的元件和 payload（產生的頁面），從而加快導航速度。

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

在文件 > API > 元件 > Nuxt Link 中閱讀更多資訊。

路由參數

useRoute() composable 可以在 Vue 元件的