logo cmdragon's Blog

Nuxt框架中内置组件详解及使用指南（三）

avatar
cmdragon 渡劫
  2024-07-08 00:00:00   2024-07-08 00:00:00   2.5k 字  10 分钟
image image

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

Nuxt 3 中<NuxtLink>组件的使用指南与示例

NuxtLink 是 Nuxt.js 框架提供的一种组件，用于在 Vue.js 应用程序中创建链接。它结合了 Vue Router 的强大功能与 HTML<a>
标签的简洁性，使得在 Nuxt.js 应用中创建内部和外部链接变得轻而易举。NuxtLink
组件能够智能地处理链接的优化，如预加载、默认属性等，为开发者提供了一种高效、灵活的链接解决方案。

如何使用 NuxtLink？

在 Nuxt.js 应用中，使用 NuxtLink 组件创建链接非常简单。只需要将<NuxtLink>标签包裹在你想要链接的文本或内容上，然后指定to
属性即可。下面是一个创建内部链接的示例：

1
2
3
4
5
<template>
  <NuxtLink to="/about">
    关于页面
  </NuxtLink>
</template>

对于外部链接，只需将链接地址作为to属性的值即可：

1
2
3
4
5
<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函数来实现。这使得你可以根据特定需求调整链接的默认设置。

示例代码：创建自定义链接组件

1
2
3
4
5
6
7
8
9
// 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 项目应该有以下的文件和目录结构：
1
2
3
4
5
6
7
8
9
my-nuxt-app/
├── components/
│   └── MyNuxtLink.vue
├── pages/
│   ├── index.vue
│   └── about.vue
├── nuxt.config.js
└── package.json

  1. 创建自定义链接组件(components/MyNuxtLink.vue):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    <h1>关于我们</h1>
    <MyNuxtLink to="/">返回首页</MyNuxtLink>
  </div>
</template>

<script>
export default {
  components: {
    MyNuxtLink: () => import('~/components/MyNuxtLink.vue')
  }
}
</script>
  1. 配置文件(nuxt.config.js):
1
2
3
4
5
export default {
  components: true, // 启用自动导入组件
  // 其他配置...
}

  1. 启动项目- 在项目根目录下运行以下命令启动开发服务器：
1
2
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或任何布局文件中引入并添加此组件。以下是一个简单的示例：

1
2
3
4
5
6
7
8
9
<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 或组件，允许你根据特定需求定制进度条的外观和行为。

示例代码

假设你想要创建一个更自定义的进度条，可以使用以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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.js 项目的结构如下：

1
2
3
4
5
6
7
8
9
my-nuxt-app/
├── layouts/
│   └── default.vue
├── pages/
│   ├── _app.vue
│   ├── index.vue
│   └── about.vue
└── app.vue

接下来，我们将修改app.vue文件以包含NuxtLoadingIndicator组件。

app.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <NuxtLayout>
    <NuxtLoadingIndicator
      color="#673AB7"
      :height="5"
      :duration="3000"
      :throttle="500"
    />
    <div>
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 这里可以添加一些全局样式 */
</style>

在这个例子中，我们为NuxtLoadingIndicator设置了一些自定义属性：

  • color设置为#673AB7，这是一个紫色的颜色代码。
  • height设置为5像素，使进度条更厚一些。
  • duration设置为3000毫秒，即进度条完成一次加载动画需要 3 秒。
  • throttle设置为500毫秒，这是进度条显示和隐藏之间的最小间隔时间。

接下来，我们可以创建一个简单的布局文件layouts/default.vue，它将用于包裹页面内容。

layouts/default.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout',
};
</script>

<style>
/* 这里可以添加一些布局样式 */
</style>

现在，让我们创建两个页面index.vue和about.vue。

pages/index.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到首页！</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
};
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

pages/about.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于我们页面的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
};
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

最后，确保在nuxt.config.ts或nuxt.config.js文件中，你已经启用了布局和页面：

1
2
3
4
5
6
7
// nuxt.config.ts 或 nuxt.config.js
export default {
  // ...
  components: true, // 确保启用了自动导入组件
  // ...
};

现在，你可以启动你的 Nuxt.js
应用程序，并在页面导航之间看到一个自定义的进度条。当你从一个页面导航到另一个页面时，NuxtLoadingIndicator将显示进度条，为用户提供视觉反馈。

往期文章归档：

Nuxt框架中内置组件详解及使用指南（三）
posts/0524f12c820c/
作者
cmdragon
发布于
2024-07-08 00:00
许可
  1. 1. 扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长
  2. 2. Nuxt 3 中<NuxtLink>组件的使用指南与示例
    1. 2.1. 如何使用 NuxtLink？
    2. 2.2. NuxtLink 的高级属性与功能
    3. 2.3. 覆盖默认值
    4. 2.4. 完整示例：
  3. 3. Nuxt 3 中<NuxtLoadingIndicator>组件的使用指南与示例
    1. 3.1. 如何使用 Nuxt Loading Indicator？
    2. 3.2. Nuxt Loading Indicator 的关键属性
    3. 3.3. 如何自定义 Nuxt Loading Indicator
    4. 3.4. 示例代码
    5. 3.5. 完整示例：
  4. 4. 往期文章归档：
  1. 1. 扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长
  2. 2. Nuxt 3 中<NuxtLink>组件的使用指南与示例
    1. 2.1. 如何使用 NuxtLink？
    2. 2.2. NuxtLink 的高级属性与功能
    3. 2.3. 覆盖默认值
    4. 2.4. 完整示例：
  3. 3. Nuxt 3 中<NuxtLoadingIndicator>组件的使用指南与示例
    1. 3.1. 如何使用 Nuxt Loading Indicator？
    2. 3.2. Nuxt Loading Indicator 的关键属性
    3. 3.3. 如何自定义 Nuxt Loading Indicator
    4. 3.4. 示例代码
    5. 3.5. 完整示例：
  4. 4. 往期文章归档：