Nuxt Kit 中的頁面和路由管理

Amd794發表於2024-09-17
UX路由

title: Nuxt Kit 中的頁面和路由管理
date: 2024/9/17
updated: 2024/9/17
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt Kit中頁面和路由管理的高階功能，包括extendPages自定義頁面路由、extendRouteRules定義複雜路由邏輯及addRouteMiddleware註冊路由中介軟體。透過這些功能，開發者能夠靈活地新增、修改路由，設定快取、重定向等，並實現訪問控制等中介軟體處理，以提升Web應用的開發效率和可維護性。

categories:

  • 前端開發

tags:

  • Nuxt
  • 路由
  • 管理
  • 中介軟體
  • 快取
  • 重定向
  • 動態

image
image

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

在構建現代 Web 應用時，路由管理是一個核心功能。Nuxt.js 提供了一系列強大且靈活的工具來幫助您建立和管理頁面及其路由。

1. extendPages：自定義頁面路由

1.1 功能說明

extendPages 允許您根據需要新增、刪除或修改自動生成的路由。預設情況下，Nuxt 會自動根據 pages 目錄中的檔案結構生成路由，但有時您可能需要更復雜的路由邏輯。

1.2 型別簽名

function extendPages(callback: (pages: NuxtPage[]) => void): void

引數

  • callback: 一個函式，該函式接受一個 NuxtPage 陣列作為引數，您可以對該陣列進行修改。

1.3 NuxtPage 介面

type NuxtPage = {
  name?: string; // 可選的姓名
  path: string; // 路由路徑
  file?: string; // 關聯的檔案路徑
  meta?: Record<string, any>; // 路由後設資料
  alias?: string[] | string; // 別名
  redirect?: RouteLocationRaw; // 重定向配置
  children?: NuxtPage[]; // 子路由
}

1.4 示例

下面是如何使用 extendPages 新增新路由的完整示例：

// my-module.ts
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options) {
    const resolver = createResolver(import.meta.url);

    extendPages((pages) => {
      pages.unshift({
        name: 'custom-preview',
        path: '/custom-preview',
        file: resolver.resolve('runtime/customPreview.vue'), // 指向元件檔案
      });
    });
  }
});

1.5 實際應用場景

  • 動態路由: 如果有不在 pages 目錄中的動態路由（如使用者配置的路由），您可以使用此功能來新增這些路由。
  • 修改預設路由: 有時，您可能希望更改或刪除預設路由，以滿足特定需求。

2. extendRouteRules：定義複雜路由邏輯

2.1 功能說明

extendRouteRules 允許您在 Nitro 伺服器引擎中定義複雜的路由邏輯，包括快取、重定向、代理等。

2.2 型別簽名

function extendRouteRules(route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions): void

引數

  • route: 要匹配的路由模式。
  • rule: 應用到匹配路由的規則配置。
  • options: 傳遞給配置的可選引數，是否覆蓋已有配置。

2.3 NitroRouteConfig 介面

interface NitroRouteConfig {
  cache?: CacheOptions | false; // 快取設定
  headers?: Record<string, string>; // HTTP 頭
  redirect?: string | { to: string; statusCode?: HTTPStatusCode }; // 重定向
  prerender?: boolean; // 預渲染設定
  proxy?: string | ({ to: string } & ProxyOptions); // 代理設定
  isr?: number | boolean; // 增量靜態再生設定
  cors?: boolean; // CORS 支援
  swr?: boolean | number; // 重新驗證請求
  static?: boolean | number; // 靜態請求設定
}

2.4 示例

以下是設定重定向和快取的完整示例：

// redirects.ts
import { createResolver, defineNuxtModule, extendRouteRules, extendPages } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options) {
    const resolver = createResolver(import.meta.url);

    extendPages((pages) => {
      pages.unshift({
        name: 'new-preview',
        path: '/new-preview',
        file: resolver.resolve('runtime/newPreview.vue'),
      });
    });

    extendRouteRules('/preview', {
      redirect: {
        to: '/new-preview',
        statusCode: 302, // 301 為永久重定向，302 為臨時重定向
      },
    });

    extendRouteRules('/new-preview', {
      cache: {
        maxAge: 60 * 60 * 24, // 設定快取時間為一天
      },
    });
  }
});

2.5 實際應用場景

  • SEO 最佳化: 重定向舊路由至新路由，可改善使用者體驗和 SEO 效能。
  • 快取控制: 根據內容的變化設定不同的快取策略，提高應用效能。

3. addRouteMiddleware：註冊路由中介軟體

3.1 功能說明

addRouteMiddleware 允許您註冊一個或多箇中介軟體以處理路由請求，如身份驗證、許可權檢查等。

3.2 型別簽名

function addRouteMiddleware(input: NuxtMiddleware | NuxtMiddleware[], options: AddRouteMiddlewareOptions): void

引數

  • input: 中介軟體物件或中介軟體物件陣列，必須包含名稱和路徑。
  • options: 可選引數，控制是否覆蓋已有中介軟體。

3.3 NuxtMiddleware 型別

type NuxtMiddleware = {
  name: string; // 中介軟體名稱
  path: string; // 中介軟體路徑
  global?: boolean; // 是否為全域性中介軟體
}

3.4 示例程式碼

以下是一個身份驗證中介軟體示例：

// runtime/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/login' && !isAuthenticated()) {
    return navigateTo('/login'); // 如果使用者未認證，則導航到登入頁
  }
});

3.5 實際應用場景

  • 訪問控制: 檢查使用者是否已登入，控制訪問某些敏感頁面。
  • 日誌跟蹤: 記錄請求日誌，便於後續分析和除錯。

4. 程式碼結構示例

以下是一個簡單的 Nuxt 模組的程式碼結構示例，結合前面的概念：

// my-module.ts
import { createResolver, defineNuxtModule, extendPages, extendRouteRules, addRouteMiddleware } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options) {
    const resolver = createResolver(import.meta.url);

    // 擴充頁面路由
    extendPages((pages) => {
      pages.unshift({
        name: 'example',
        path: '/example',
        file: resolver.resolve('runtime/example.vue'),
      });
    });

    // 擴充路由規則
    extendRouteRules('/home', {
      redirect: {
        to: '/example',
        statusCode: 301,
      },
    });

    // 新增中介軟體
    addRouteMiddleware(
      { name: 'auth', path: '/auth', global: true },
      { override: true }
    );
  }
});

透過這個示例，您可以看到如何將多個功能結合在一個模組中，實現複雜的路由邏輯和功能。

總結

Nuxt Kit 提供的頁面和路由管理功能極為強大，可以滿足各種開發需求。透過 extendPages、extendRouteRules 和 addRouteMiddleware，開發者可以自由地修改和擴充套件應用的路由邏輯。在構建大型應用時，這些工具可以極大地提高開發效率和應用的可維護性。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt Kit 中的頁面和路由管理 | cmdragon's Blog

往期文章歸檔：

  • Nuxt Kit 中的上下文處理 | cmdragon's Blog
  • Nuxt Kit 元件管理：註冊與自動匯入 | cmdragon's Blog
  • Nuxt Kit 自動匯入功能：高效管理你的模組和組合式函式 | cmdragon's Blog
  • 使用 Nuxt Kit 檢查模組與 Nuxt 版本相容性 | cmdragon's Blog
  • Nuxt Kit 的使用指南：從載入到構建 | cmdragon's Blog
  • Nuxt Kit 的使用指南：模組建立與管理 | cmdragon's Blog
  • 使用 nuxi upgrade 升級現有nuxt專案版本 | cmdragon's Blog
  • 如何在 Nuxt 3 中有效使用 TypeScript | cmdragon's Blog
  • 使用 nuxi preview 命令預覽 Nuxt 應用 | cmdragon's Blog
  • 使用 nuxi prepare 命令準備 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi init 建立全新 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi info 檢視 Nuxt 專案詳細資訊 | cmdragon's Blog
  • 使用 nuxi generate 進行預渲染和部署 | cmdragon's Blog
  • 探索 Nuxt Devtools：功能全面指南 | cmdragon's Blog
  • 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南 | cmdragon's Blog
  • 使用 nuxi clean 命令清理 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi build-module 命令構建 Nuxt 模組 | cmdragon's Blog
  • 使用 nuxi build 命令構建你的 Nuxt 應用程式 | cmdragon's Blog
  • 使用 nuxi analyze 命令分析 Nuxt 應用的生產包 | cmdragon's Blog
  • 使用 nuxi add 快速建立 Nuxt 應用元件 | cmdragon's Blog
  • 使用 updateAppConfig 更新 Nuxt 應用配置 | cmdragon's Blog
  • 使用 Nuxt 的 showError 顯示全屏錯誤頁面 | cmdragon's Blog

相關文章