如何在 Nuxt 中動態設定頁面佈局

Amd794發表於2024-08-24
UX

title: 如何在 Nuxt 中動態設定頁面佈局
date: 2024/8/24
updated: 2024/8/24
author: cmdragon

excerpt:
摘要：本文介紹如何在Nuxt框架中透過設定setPageLayout函式動態調整頁面佈局，包括安裝Nuxt、建立不同佈局檔案及中介軟體，並透過示例演示如何根據不同路徑設定相應佈局。

categories:

  • 前端開發

tags:

  • Nuxt
  • 佈局
  • 動態
  • 設定
  • 中介軟體
  • 路由
  • 頁面

image
image

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

在使用 Nuxt 框架開發應用時，頁面的佈局往往是固定的，但有時我們可能需要根據不同的頁面或條件來動態調整佈局。

1. 什麼是頁面佈局

在 Nuxt 中，頁面佈局是指頁面的整體外觀和結構，比如頭部、導航、側邊欄以及底部等。使用佈局可以幫助我們更好地管理頁面樣式和結構。

2. 使用 setPageLayout

setPageLayout 是一個用於動態設定頁面佈局的函式。需要注意的是，此函式只能在元件的 setup
函式、外掛或路由中介軟體中使用。例如，我們可以根據使用者的訪問路徑來設定不同的佈局。

3. 基本使用方法

安裝 Nuxt

首先，確保你已經安裝了 Nuxt。你可以使用以下命令建立一個新的 Nuxt 專案：

npx nuxi@latest init nuxt-dynamic-layout
cd nuxt-dynamic-layout
npm install

建立佈局檔案

在 layouts 資料夾中建立兩個佈局檔案，它們將用於不同的頁面佈局：

layouts/default.vue


<template>
  <div>
    <header>預設佈局的頭部</header>
    <nuxt/>
    <footer>預設佈局的底部</footer>
  </div>
</template>

layouts/other.vue


<template>
  <div>
    <header>其它佈局的頭部</header>
    <nuxt/>
    <footer>其它佈局的底部</footer>
  </div>
</template>

建立中介軟體

接下來，我們將建立一箇中介軟體來動態設定佈局。首先，在 middleware 資料夾中建立一個新的檔案 custom-layout.ts。

middleware/custom-layout.ts

export default defineNuxtRouteMiddleware((to) => {
    // 根據訪問的路徑設定佈局
    if (to.path === '/other') {
        setPageLayout('other');
    } else {
        setPageLayout('default');
    }
});

建立頁面

現在我們需要建立兩個頁面，分別使用預設佈局和其他佈局。在 pages 資料夾中建立兩個新的頁面：

pages/index.vue


<template>
  <div>
    <h1>首頁</h1>
    <nuxt-link to="/other">前往其它頁面</nuxt-link>
  </div>
</template>

pages/other.vue


<template>
  <div>
    <h1>其它頁面</h1>
    <nuxt-link to="/">返回首頁</nuxt-link>
  </div>
</template>

配置中介軟體

最後一步是在 nuxt.config.ts 中配置我們的中介軟體，使其在路由導航時被呼叫。

nuxt.config.ts

export default defineNuxtConfig({
    router: {
        middleware: ['custom-layout']
    }
});

4. 執行專案

完成以上步驟後，你可以透過以下命令啟動 Nuxt 專案：

npm run dev

開啟瀏覽器，訪問 http://localhost:3000。你會看到首頁使用的是預設佈局，點選連結進入其它頁面時，頁面佈局將變為其它佈局。

5. 結論

透過上述步驟，你已經瞭解到如何在 Nuxt 專案中動態設定頁面佈局。掌握這一功能可以使你的應用更加靈活，能夠根據使用者的需求展示不同的頁面佈局。

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

往期文章歸檔：

  • 使用 reloadNuxtApp 強制重新整理 Nuxt 應用 | cmdragon's Blog
  • 使用 refreshNuxtData 重新整理 Nuxt應用 中的資料 | cmdragon's Blog
  • 使用 prerenderRoutes 進行預渲染路由 | cmdragon's Blog
  • 使用 preloadRouteComponents 提升 Nuxt 應用的效能 | cmdragon's Blog
  • 使用 preloadComponents 進行元件預載入 | cmdragon's Blog
  • 使用 prefetchComponents 進行元件預取 | cmdragon's Blog
  • 使用 onNuxtReady 進行非同步初始化 | cmdragon's Blog
  • 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 navigateTo 實現靈活的路由導航 | cmdragon's Blog
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 | cmdragon's Blog
  • 掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置 | cmdragon's Blog
  • 使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog
  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog

相關文章