Nuxt框架中內建元件詳解及使用指南（三）

Amd794發表於2024-07-08
UX框架元件

title: Nuxt框架中內建元件詳解及使用指南（三）
date: 2024/7/8
updated: 2024/7/8
author: cmdragon

excerpt:
摘要：“Nuxt 3框架中與元件的深度使用教程，包括如何使用這兩個元件進行頁面導航和載入指示的自定義配置與實戰示例。”

categories:

  • 前端開發

tags:

  • Nuxt3
  • 元件
  • NuxtLink
  • 導航
  • 連結
  • 載入
  • 自定義

image

image

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

Nuxt 3 中<NuxtLink>元件的使用指南與示例

NuxtLink 是 Nuxt.js 框架提供的一種元件，用於在 Vue.js 應用程式中建立連結。它結合了 Vue Router 的強大功能與 HTML<a>
標籤的簡潔性，使得在 Nuxt.js 應用中建立內部和外部連結變得輕而易舉。NuxtLink
元件能夠智慧地處理連結的最佳化，如預載入、預設屬性等，為開發者提供了一種高效、靈活的連結解決方案。

在 Nuxt.js 應用中，使用 NuxtLink 元件建立連結非常簡單。只需要將<NuxtLink>標籤包裹在你想要連結的文字或內容上，然後指定to
屬性即可。下面是一個建立內部連結的示例：

<template>
  <NuxtLink to="/about">
    關於頁面
  </NuxtLink>
</template>

對於外部連結，只需將連結地址作為to屬性的值即可：

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt 網站
  </NuxtLink>
</template>

NuxtLink 元件提供了豐富的屬性來增強連結的互動性和功能：

  • target屬性：允許指定連結在新標籤頁中開啟，如target="_blank"。
  • rel屬性：用於設定連結的 rel 屬性，如rel="noopener noreferrer"，適用於外部連結。
  • noRel屬性：當連結需要外部連結的行為但不需要 rel 屬性時，可以使用此屬性。
  • activeClass和exactActiveClass：用於自定義活動連結和精確活動連結的類，幫助實現更豐富的視覺效果。
  • replace屬性：控制連結點選時是否替換當前頁面歷史記錄。
  • ariaCurrentValue屬性：用於設定活動連結的 aria-current 屬性，提高無障礙訪問性。
  • external屬性：強制將連結視為外部連結或內部連結。
  • prefetch和noPrefetch：控制是否為即將進入視口的連結預載入資源。
  • prefetchedClass：應用於已預載入連結的類。
  • custom屬性：允許完全自定義連結的渲染方式和導航行為。

覆蓋預設值

如果你希望自定義 NuxtLink 的某些行為，可以透過建立自定義元件並使用defineNuxtLink函式來實現。這使得你可以根據特定需求調整連結的預設設定。

示例程式碼：建立自定義連結元件

// components/MyNuxtLink.vue
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  externalRelAttribute: 'noopener', // 自定義外部連結的 rel 屬性
  activeClass: 'my-active-class', // 自定義活動連結類
  exactActiveClass: 'my-exact-active-class', // 自定義精確活動連結類
  prefetchedClass: 'my-prefetched-class', // 自定義預載入連結類
  trailingSlash: 'remove', // 自定義尾部斜槓行為
})

完整示例：

  1. 專案結構- 你的 Nuxt.js 專案應該有以下的檔案和目錄結構：
my-nuxt-app/
├── components/
│   └── MyNuxtLink.vue
├── pages/
│   ├── index.vue
│   └── about.vue
├── nuxt.config.js
└── package.json
  1. 建立自定義連結元件(components/MyNuxtLink.vue):
<template>
  <NuxtLink
    :to="to"
    :target="target"
    :rel="rel"
    :class="{'my-active-class': isActive, 'my-exact-active-class': isExactActive}"
  >
    <slot></slot>
  </NuxtLink>
</template>

<script>
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  externalRelAttribute: 'noopener noreferrer',
  activeClass: 'my-active-class',
  exactActiveClass: 'my-exact-active-class',
  prefetchedClass: 'my-prefetched-class',
  trailingSlash: 'remove'
});
</script>

<style>
.my-active-class {
  color: red;
}

.my-exact-active-class {
  font-weight: bold;
}
</style>
  1. 首頁(pages/index.vue):
<template>
  <div>
    <h1>歡迎來到首頁</h1>
    <MyNuxtLink to="/about">關於頁面</MyNuxtLink>
    <MyNuxtLink to="https://nuxtjs.org" target="_blank" external>訪問 Nuxt.js 官網</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>
  1. 關於頁面(pages/about.vue):
<template>
  <div>
    <h1>關於我們</h1>
    <MyNuxtLink to="/">返回首頁</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>
  1. 配置檔案(nuxt.config.js):
export default {
  components: true, // 啟用自動匯入元件
  // 其他配置...
}
  1. 啟動專案- 在專案根目錄下執行以下命令啟動開發伺服器：
npm run dev

開啟瀏覽器並訪問http://localhost:3000，你應該能看到首頁，並且可以透過自定義的 MyNuxtLink 元件導航到“關於頁面”或者開啟新標籤頁訪問
Nuxt.js 官網。

Nuxt 3 中<NuxtLoadingIndicator>元件的使用指南與示例

Nuxt Loading Indicator 是 Nuxt.js 應用程式中一個實用的元件，用於在頁面載入或導航時顯示載入進度條。這不僅提升使用者體驗，還能為使用者顯示應用程式正在執行的操作，從而減少不確定性。

如何使用 Nuxt Loading Indicator？

在 Nuxt.js 應用中，要使用 Nuxt Loading Indicator，首先需要在你的app.vue或任何佈局檔案中引入並新增此元件。以下是一個簡單的示例：

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator /> <!-- 這裡是載入指示器的位置 -->
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

Nuxt Loading Indicator 的關鍵屬性

  1. color：設定進度條的顏色。預設為黑色，你可以根據需要調整顏色。
  2. height：進度條的高度，以畫素為單位。預設值為 3px。
  3. duration：進度條顯示的持續時間，以毫秒為單位。預設為 2000 毫秒。
  4. throttle：進度條出現和隱藏的節流時間，以毫秒為單位。預設為 200 毫秒。

如何自定義 Nuxt Loading Indicator

Nuxt Loading Indicator 支援透過預設插槽傳遞自定義 HTML 或元件，允許你根據特定需求定製進度條的外觀和行為。

示例程式碼

假設你想要建立一個更自定義的進度條，可以使用以下程式碼：

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator
        :color="customColor"
        :height="customHeight"
        :duration="customDuration"
        :throttle="customThrottle"
      >
        <!-- 自定義內容 -->
        <div class="custom-loading-text">載入中...</div>
      </NuxtLoadingIndicator>
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

<script>
export default {
  data() {
    return {
      customColor: '#FF5733', // 自定義顏色
      customHeight: 5, // 自定義高度
      customDuration: 1500, // 自定義持續時間
      customThrottle: 500, // 自定義節流時間
    };
  },
};
</script>

<style scoped>
.custom-loading-text {
  color: #fff;
  font-size: 18px;
  text-align: center;
  margin-top: 50px;
}
</style>

完整示例：

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog

往期文章歸檔：

  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（四） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（三） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（二） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（一） | cmdragon’s Blog
  • 初學者必讀：如何使用 Nuxt 中介軟體簡化網站開發 | cmdragon's Blog

相關文章