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

title: Nuxt框架中內置組件詳解及使用指南（三） date: 2024/7/8 updated: 2024/7/8 author: cmdragon excerpt: 摘要：“Nuxt 3框架中與組件的深度使用教程，包括如何使用這兩個組件進行頁面導航和載入指示的自定義配置與實戰示例。” ca ...

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

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

categories:

前端開發

tags:

Nuxt3
組件
NuxtLink
導航
鏈接
載入
自定義

掃描二維碼關註或者微信搜一搜：`編程智域前端至全棧交流與成長`

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

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

如何使用 NuxtLink？

在 Nuxt.js 應用中，使用 NuxtLink 組件創建鏈接非常簡單。只需要將<NuxtLink>標簽包裹在你想要鏈接的文本或內容上，然後指定to
屬性即可。下麵是一個創建內部鏈接的示例：

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

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

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

NuxtLink 的高級屬性與功能

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', // 自定義尾部斜杠行為
})

完整示例：

項目結構- 你的 Nuxt.js 項目應該有以下的文件和目錄結構：

my-nuxt-app/
├── components/
│   └── MyNuxtLink.vue
├── pages/
│   ├── index.vue
│   └── about.vue
├── nuxt.config.js
└── package.json

創建自定義鏈接組件(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>

首頁(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>

關於頁面(pages/about.vue):

<template>
  <div>
    <h1>關於我們</h1>
    <MyNuxtLink to="/">返迴首頁</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>

配置文件(nuxt.config.js):

export default {
  components: true, // 啟用自動導入組件
  // 其他配置...
}

啟動項目- 在項目根目錄下運行以下命令啟動開發伺服器：

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 的關鍵屬性

color：設置進度條的顏色。預設為黑色，你可以根據需要調整顏色。
height：進度條的高度，以像素為單位。預設值為 3px。
duration：進度條顯示的持續時間，以毫秒為單位。預設為 2000 毫秒。
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框架中內置組件詳解及使用指南（三）

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

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

如何使用 NuxtLink？

NuxtLink 的高級屬性與功能

覆蓋預設值

完整示例：

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

如何使用 Nuxt Loading Indicator？

Nuxt Loading Indicator 的關鍵屬性

如何自定義 Nuxt Loading Indicator

示例代碼

完整示例：

往期文章歸檔：

掃描二維碼關註或者微信搜一搜：`編程智域前端至全棧交流與成長`

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

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