前言

书接上回，在学习完 之后，我相信我们对 有了大致的了解，已经迫不及待去学习关于 Nuxt 更多的使用技巧，话不多说，让我们开启 Nuxt 的进阶之旅吧。

Nuxt 进阶知识

引入组件库

我们可以从 中寻找想要引入的组件库，我们以 为例，介绍如何在 Nuxt 中使用组件库，进入 官网，参照文档要求进行安装。

首先，在项目根目录中打开命令行终端并输入：npx nuxi@latest module add ui 。

这样，nuxi 脚手架会自动帮我们下载 @nuxt/ui 这个第三方包并自动注册到 nuxt.config.ts 中的 modules 数组中，这样我们就可以在页面中直接使用。

示例代码：

<template>
  <UButton>Button</UButton>
  <UInput color="primary" variant="outline" placeholder="Search..." />
</template>

引入组件就能使用，能达到立竿见影的效果。

嵌套路由

Nuxt 和 Vue 一样，也是支持嵌套路由的，只不过在 Nuxt 中， 嵌套路由也是根据目录结构和文件的名称自动生成的，编写嵌套路由的步骤如下。

首先，创建一个一级路由，如：parent.vue

然后，创建一个与一级路由同名同级的文件夹，如：parent

其次，在 parent 文件夹下，创建一个嵌套的二级路由

其中包括：parent/child1.vue 和 parent/child1.vue 为两个二级路由页面，parent/index.vue 则为二级路由默认的页面

最后，需要在 parent.vue 中添加 NuxtPage 路由占位，以下为 parent.vue 文件中的示例代码。

<template>
  <div>
    <div>Parent 一级路由页面 - 公共页面</div>
    <div>
      <NuxtLink to="/parent">
        <UButton variant="solid">导航至 parent 二级路由页面</UButton>
      </NuxtLink>
      <NuxtLink to="/parent/child1">
        <UButton color="yellow" variant="solid">导航至 parent 二级路由页面的子页面 child1</UButton>
      </NuxtLink>
      <NuxtLink to="/parent/child2">
        <UButton color="blue" variant="solid">导航至 parent 二级路由页面的子页面 child1</UButton>
      </NuxtLink>
    </div>
    <!-- 嵌套二级路由 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped></style>

示例演示：

路由中间件（middleware）

Nuxt 提供了一个可定制的，用来监听路由的导航，包括：局部和全局监听，而全局监听支持在服务器和客户端执行，路由中间件分为三种：匿名（或内联）路由中间件，命名路由中间件和全局路由中间件。

匿名（或内联）路由中间件

在页面中使用 definePageMeta 函数定义，可监听局部路由，当注册多个中间件时，会按照注册顺序来执行。

<template>
  <div>我是 Parent 二级路由页面的子页面 child1</div>
</template>

<script setup>
definePageMeta({
  // 路由中间件( 监听路由 )
  middleware: [
    // 第一个中间件
    function (to, from) {
      console.log(from)
      console.log(to)
      console.log('child1 第一个中间件')
    },
    // 第二个中间件
    function (to, from) {
      // console.log(from)
      // console.log(to)
      console.log('child1 第二个中间件')
    },
    // 第三个中间件
    function (to, from) {
      console.log('child1 第三个中间件')
    }
  ]
})
</script>

<style scoped></style>

示例演示：

命名路由中间件

命名路由中间件，需要在 middleware 目录中定义，会自动加载中间件，应遵循 kebab-case 命名规范。

例如，在 /pages/middleware 文件夹下定义一个 home.ts 的中间件。

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(from)
  console.log(to)
  console.log('home 中间件')
})

然后，在需要使用的页面引入，直接以字符串的形式传入 middleware 数组中。

<template>
  <div>我是 Parent 二级路由页面的子页面 child2</div>
</template>

<script setup>
definePageMeta({
  // 路由中间件( 监听路由 )
  middleware: ['home']
})
</script>

<style scoped></style>

示例演示：

全局路由中间件

需要定义在 middleware 目录中， 并且创建的文件要带 .global 后缀，每次路由更改都会自动运行

// 这个优先级别是比较高的
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('auth.global.ts 全局路由中间件')
})

然后，每次路由更改的时候都会在每个页面中执行，值得注意的是，全局路由中间件的优先级是比较高的，执行的顺序要优于其它类型的中间件。

示例演示：

路由验证( validate )

Nuxt 支持对每个页面路由进行验证，我们可以通过 definePageMeta 中的 validate 属性来对路由进行一定的规则验证。其中 validate 属性接受一个回调函数，回调函数中以 route 作为参数。

回调函数的返回值：一方面支持返回布尔类型的值来确定是否放行路由，返回 true 则放行路由，返回 false 则默认重定向到内置的 404 页面中；另一方面支持返回一个对象，例如，返回 { statusCode:401 }，同样表示路由验证失败，返回到默认的 404 页面中。

值得一提的是，对于路由验证失败来说，也是可以自定义错误页面的，在项目根目录新建 error.vue 页面，注意不是 pages 目录中，而是项目根目录中。

<script lang="ts" setup>
// 获取动态路由的参数
const route = useRoute()
const { id } = route.params

definePageMeta({
  // 路由参数的验证
  validate: (route) => {
    console.log(route.params.id)
    // 在这里可以进行路由参数的验证，如使用正则进行验证
    // 1. 返回布尔值
    // return /^\d+$/.test(route.params.id as string)
    // 2. 返回一个对象
    return {
      statusCode: 401, // 路由验证失败
      statusMessage: "validata router error"
    }
  }
})
</script>

Nuxt 插件

Nuxt 有一个插件系统，可以在创建 Vue 应用程序时使用 Vue 插件等，Nuxt 会自动读取 plugins/ 目录中的文件，并在创建 Vue 应用程序时加载它们。

因此 Nuxt 支持自定义插件并进行扩展，创建插件有两种方式：

方式一，直接使用 useNuxtApp() 中的 provide(name, vlaue) 方法直接创建，例如：可在 app.vue 中创建。

<script setup>
// 方式一：创建插件
const nuxtApp = useNuxtApp()
nuxtApp.provide("provId", () => {
  return "省份名称"
})
nuxtApp.provide("feskill", "Nuxt")

// 使用插件
console.log(nuxtApp.$provId())
console.log(nuxtApp.$feskill)
</script>

方式二，在 plugins 目录中创建插件，例如，在 plugins 目录下创建 date.ts 插件。

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      // 自定义的插件，在创建 Vue 实例时就会自动注册
      formDate: (date: string) => {
        return '日期：' + date
      }
    }
  }
})

然后在组件中使用 useNuxtApp() 方法来获取到插件中的方法

<script setup>
// 方式二：在 plugins 目录中创建插件后，可以在这里获取
const nuxtApp = useNuxtApp()

// 使用插件
console.log(nuxtApp.$formDate('2024-4-30'))
</script>

总结

关于 Nuxt 进阶相关的知识我就分享到这里啦，那么 Nuxt 有哪些更高级的使用技巧呢，我们下期见，学完下期，我们就可以上手开启实战项目，然后学习部署到服务器的多种方式。