Nuxt 3 路由系統詳解：配置與實踐指南

Amd794發表於2024-06-21
UX路由

title: Nuxt 3 路由系統詳解：配置與實踐指南
date: 2024/6/21
updated: 2024/6/21
author: cmdragon

excerpt:
摘要：本文是一份關於Nuxt 3路由系統的詳盡指南。它從介紹Nuxt 3的基本概念開始，包括Nuxt 3與Nuxt 2的區別和選擇Nuxt 3的理由。然後，它詳細解釋了安裝和配置Nuxt 3的步驟，以及Nuxt 3路由系統的基礎知識，如動態路由和巢狀路由。接著，它介紹了路由中介軟體的作用和編寫自定義中介軟體的方法，並討論了頁面佈局、導航連結和頁面過渡效果。最後，它涵蓋了高階路由技巧，如非同步資料獲取、錯誤頁面處理和路由守衛，以及實戰案例分析，包括部落格系統路由設計、電商網站路由設計和多語言支援的路由實現。最後，它討論了效能最佳化與安全，包括路由懶載入、路由安全性和效能監控與除錯。

categories:

  • 前端開發

tags:

  • Nuxt
  • 路由
  • Vue
  • SSR
  • 中介軟體
  • 元件
  • 配置

image

image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

第一章：Nuxt 3 簡介

Nuxt 3 是什麼

Nuxt 3 是一個基於 Vue 3 的伺服器端渲染（SSR）框架，它為開發者提供了一個優雅的方式來構建服務端渲染的 Vue 應用程式。Nuxt 3 繼承了
Nuxt 2 的核心概念和優勢，同時引入了 Vue 3 的最新特性，如組合式 API（Composition API）和 TypeScript 支援，使得開發體驗更加現代化和高效。

Nuxt 3 提供了一套完整的檔案結構，使得專案的組織更加清晰，同時也內建了許多功能，如程式碼分割、靜態站點生成、中介軟體支援等，幫助開發者快速啟動和構建高質量的應用程式。

Nuxt 3 與 Nuxt 2 的區別

  1. 基於 Vue 3：Nuxt 3 完全基於 Vue 3 構建而成，這意味著它可以利用 Vue 3 的所有新特性和效能改進，如更快的狀態更新、更好的型別支援等。

  2. 組合式 API：Nuxt 3 支援使用 Vue 3 的組合式 API，這使得程式碼更加模組化和可重用，同時也提高了開發效率。

  3. TypeScript 支援：Nuxt 3 提供了內建的 TypeScript 支援，使得型別檢查和程式碼提示更加完善，有助於提高程式碼質量和減少錯誤。

  4. 新的配置系統：Nuxt 3 引入了一個新的配置系統，使得配置更加靈活和模組化。

  5. 改進的構建和部署流程：Nuxt 3 最佳化了構建和部署流程，提供了更快的構建速度和更簡單的部署步驟。

  6. 實驗性特性：Nuxt 3 引入了一些實驗性特性，如基於檔案的路由系統，使得路由定義更加直觀和簡單。

為什麼選擇 Nuxt 3

  1. 現代化的開發體驗：Nuxt 3 整合了 Vue 3 的最新特性，提供了更加現代化的開發體驗。

  2. 效能最佳化：Nuxt 3 利用 Vue 3 的效能優勢，提供了更快的渲染速度和更高效的程式碼執行。

  3. 清晰的檔案結構：Nuxt 3 的檔案結構設計清晰，有助於專案管理和程式碼維護。

  4. 豐富的功能集：Nuxt 3 內建了許多功能，如程式碼分割、靜態站點生成、中介軟體支援等，減少了開發者的重複工作。

  5. 社群支援：Nuxt 社群活躍，提供了大量的外掛和主題，可以幫助開發者快速構建應用程式。

  6. 易於擴充套件：Nuxt 3 的模組化設計使得應用程式易於擴充套件，開發者可以根據需要新增新的功能。

選擇 Nuxt 3，開發者可以享受到一個高效、靈活且功能豐富的框架，從而更加專注於業務邏輯的開發，而不是框架本身的配置和實現。

第二章：安裝與配置

環境準備

在開始使用 Nuxt 3 之前，確保你的開發環境滿足以下要求：

  1. Node.js：Nuxt 3 需要 Node.js 14.17.0 或更高版本。你可以從Node.js 官方網站下載並安裝。
  2. npm 或 yarn：Node.js 包管理器，npm 是預設的，但 yarn 也可以用於管理依賴。確保已安裝其中之一。
  3. Git：版本控制系統，用於管理程式碼倉庫。
  4. 文字編輯器/IDE：推薦使用支援 Vue 3 的編輯器，如 Visual Studio Code、IntelliJ IDEA 或 WebStorm。

建立 Nuxt 3 專案

  1. 使用 CLI：在命令列中，執行以下命令來建立一個新的 Nuxt 3 專案：

    npx create-nuxt-app my-project

    這將建立一個名為my-project的新目錄，其中包含初始的 Nuxt 3 專案結構。

  2. 選擇預設：如果create-nuxt-app提示，可以選擇使用預設（如@nuxtjs/kit或@nuxtjs/next
    ），根據專案需求選擇。預設情況下，@nuxtjs/kit適用於 SSR 專案，而@nuxtjs/next適用於 Next.js 整合。

專案結構概覽

Nuxt 3 專案的基本結構如下：

  • my-project(專案根目錄)：

    • pages：包含應用程式的路由頁面，每個資料夾代表一個路由層級，如pages/index.vue。
    • components：全域性複用的 Vue 元件。
    • layouts：定義頁面佈局，如基礎佈局、分頁佈局等。
    • store：Vuex 狀態管理。
    • scripts：包含全域性指令碼，如公共模組。
    • styles：全域性樣式，可以使用 CSS、SCSS、SASS 等。
    • .nuxt：Nuxt 3 的內部目錄，包含構建相關的檔案和配置。
    • package.json：專案依賴和配置。
    • nuxt.config.js：核心配置檔案，定義專案設定和構建選項。

第三章：Nuxt 3 路由基礎

路由概念

在 Nuxt 3 中，路由是用於定義應用程式中不同頁面之間導航的方式。Nuxt 3
基於檔案系統自動生成路由配置，這意味著你不需要手動編寫路由定義，只需按照約定在pages目錄下建立對應的.vue檔案即可。

Nuxt 3 路由配置

Nuxt 3 會根據pages目錄中的檔案結構自動生成路由配置。以下是一些基本的路由配置示例：

  • 對於pages/index.vue，Nuxt 會生成根路由/。
  • 對於pages/about.vue，Nuxt 會生成/about路由。
  • 對於pages/user/_id.vue，Nuxt 會生成一個動態路由/user/:id。

如果需要自定義路由配置，可以在nuxt.config.js檔案中透過router選項進行設定。

動態路由

動態路由允許你建立基於引數的路由。在 Nuxt 3 中，動態路由透過在檔名中使用下劃線_字首來定義。以下是一個動態路由的例子：

  • 資料夾結構：pages/user/_id.vue
  • 自動生成的路由：/user/:id
  • 在元件中訪問引數：this.$route.params.id

動態路由可以巢狀使用，例如pages/user/_id/post/_postId.vue會生成/user/:id/post/:postId的路由。

巢狀路由

巢狀路由（也稱為二級路由）允許你在頁面中巢狀其他頁面或元件。在 Nuxt 3 中，你可以透過在pages目錄中建立子目錄來定義巢狀路由。

以下是一個巢狀路由的例子：

  • 資料夾結構：pages/user/index.vue和pages/user/profile.vue

  • 自動生成的路由：

    • /user對應pages/user/index.vue
    • /user/profile對應pages/user/profile.vue

如果需要在頁面中定義巢狀路由，可以在頁面元件中透過<router-view>標籤來指定路由出口。例如，在pages/user/index.vue
中，你可以這樣定義巢狀路由：

<template>
  <div>
    <router-view></router-view> <!-- 巢狀路由出口 -->
  </div>
</template>

在nuxt.config.js中，你也可以使用extendRoutes方法來擴充套件或修改路由配置，實現更復雜的路由邏輯。

第四章：路由中介軟體

中介軟體的作用

在 Nuxt 3 中，路由中介軟體允許你在處理路由之前執行一些程式碼，這些程式碼可以是驗證、許可權檢查、日誌記錄等。中介軟體可以用來確保只有滿足特定條件的使用者才能訪問某些頁面，或者在使用者訪問頁面之前執行一些預處理操作。

編寫自定義中介軟體

在 Nuxt 3 中，你可以透過在middleware目錄下建立.js
檔案來編寫自定義中介軟體。每個檔案都會被自動註冊為一箇中介軟體。中介軟體函式接收一個context物件，你可以透過這個物件訪問路由資訊、請求和響應等。

以下是一個簡單的中介軟體示例：

// middleware/auth.js
export default function (context) {
  if (!context.store.getters.isAuthenticated) {
    context.redirect('/login')
  }
}

在這個例子中，如果使用者未認證，中介軟體會將使用者重定向到登入頁面。

全域性中介軟體與區域性中介軟體

  • 全域性中介軟體：全域性中介軟體會在每個路由之前執行。要定義全域性中介軟體，只需將中介軟體檔案放在middleware目錄下，Nuxt 3
    會自動將其應用於所有路由。
  • 區域性中介軟體：區域性中介軟體只應用於特定的頁面。你可以在pages目錄下的.vue檔案中透過middleware屬性指定要使用的中介軟體。

例如，在pages/user/_id.vue中使用區域性中介軟體：

<script>
export default {
  middleware: 'auth', // 使用名為 'auth' 的中介軟體
}
</script>

在這個例子中，auth中介軟體只會在訪問/user/:id路由時執行。

透過合理使用路由中介軟體，你可以增強 Nuxt 3 應用程式的安全性和使用者體驗，確保只有授權使用者可以訪問敏感頁面，並在使用者訪問頁面之前執行必要的預處理操作。

第五章：頁面佈局與導航

第六章：高階路由技巧

第七章：實戰案例分析

第八章：效能最佳化與安全

餘下文章內容請點選跳轉至個人部落格頁面繼續閱讀。：Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon's Blog

往期文章推薦：

  • Nuxt 3元件開發與管理 | cmdragon's Blog

  • Nuxt.js 深入淺出：目錄結構與檔案組織詳解 | cmdragon’s Blog**

  • 友情連結 | cmdragon’s Blog**

  • 安裝 Nuxt.js 的步驟和注意事項 | cmdragon’s Blog**

  • 探索Web Components | cmdragon’s Blog**

  • Vue微前端架構與Qiankun實踐理論指南 | cmdragon’s Blog**

  • Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon’s Blog**

  • Tailwind CSS 響應式設計實戰指南 | cmdragon’s Blog**

  • Tailwind CSS 實戰指南：快速構建響應式網頁設計 | cmdragon’s Blog**

  • Vue 3與ESLint、Prettier：構建規範化的前端開發環境 | cmdragon’s Blog**

  • Vue TypeScript 實戰：掌握靜態型別程式設計 | cmdragon’s Blog**

相關文章