--- theme: smartblue --- # 前言书接上回，在学习完 [《拥抱全栈框架 Nuxt | 基础篇》](https://juejin.cn/post/7362824067773431819)之后，我相信我们对 [Nuxt](https://nuxt.com/) 有了大致的了解，已经迫不及待去学习关于 Nuxt 更多的使用技巧，话不多说，让我们开启 Nuxt 的进阶之旅吧。 # Nuxt 进阶知识 ## 引入组件库我们可以从 [**Nuxt Modules**](https://nuxt.com/modules) 中寻找想要引入的组件库，我们以 [Nuxt UI](https://ui.nuxt.com/) 为例，介绍如何在 Nuxt 中使用组件库，进入 [Nuxt UI](https://ui.nuxt.com/) 官网，参照文档要求进行安装。

首先，在项目根目录中打开命令行终端并输入：`npx nuxi@latest module add ui` 。这样，nuxi 脚手架会自动帮我们下载 `@nuxt/ui` 这个第三方包并自动注册到 `nuxt.config.ts` 中的 `modules` 数组中，这样我们就可以在页面中直接使用。

**示例代码：** ```ts ``` 引入组件就能使用，能达到立竿见影的效果。

## 嵌套路由 Nuxt 和 Vue 一样，也是支持嵌套路由的，只不过在 Nuxt 中，嵌套路由也是根据目录结构和文件的名称自动生成的，编写嵌套路由的步骤如下。 **首先**，创建一个一级路由，如：`parent.vue` **然后**，创建一个与一级路由同名同级的文件夹，如：`parent`

**其次**，在 parent 文件夹下，创建一个嵌套的二级路由其中包括：`parent/child1.vue` 和 `parent/child1.vue` 为两个二级路由页面，`parent/index.vue` 则为二级路由默认的页面

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

## 路由中间件（middleware） Nuxt 提供了一个可定制的[**路由中间件**](https://nuxt.com/docs/guide/directory-structure/middleware)，用来监听路由的导航，包括：局部和全局监听，而全局监听支持在服务器和客户端执行，路由中间件分为三种：**匿名（或内联）路由中间件**，**命名路由中间件**和**全局路由中间件**。 ### 匿名（或内联）路由中间件在页面中使用 `definePageMeta` 函数定义，可监听局部路由，当注册多个中间件时，会按照注册顺序来执行。 ```ts ``` **示例演示：**

### 命名路由中间件命名路由中间件，需要在 middleware 目录中定义，会自动加载中间件，应遵循 kebab-case 命名规范。例如，在 `/pages/middleware` 文件夹下定义一个 `home.ts` 的中间件。

```ts export default defineNuxtRouteMiddleware((to, from) => { console.log(from) console.log(to) console.log('home 中间件') }) ``` 然后，在需要使用的页面引入，直接以字符串的形式传入 `middleware` 数组中。 ```ts ``` **示例演示：**

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

```ts // 这个优先级别是比较高的 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 目录中，而是项目根目录中。 ```ts ``` ## Nuxt 插件 Nuxt 有一个插件系统，可以在创建 Vue 应用程序时使用 Vue 插件等，Nuxt 会自动读取 plugins/ 目录中的文件，并在创建 Vue 应用程序时加载它们。因此 Nuxt 支持自定义插件并进行扩展，创建插件有两种方式：方式一，直接使用 `useNuxtApp()` 中的 `provide(name, vlaue)` 方法直接创建，例如：可在 app.vue 中创建。 ```ts ``` 方式二，在 plugins 目录中创建插件，例如，在 plugins 目录下创建 `date.ts` 插件。 ```ts export default defineNuxtPlugin((nuxtApp) => { return { provide: { // 自定义的插件，在创建 Vue 实例时就会自动注册 formDate: (date: string) => { return '日期：' + date } } } }) ``` 然后在组件中使用 `useNuxtApp()` 方法来获取到插件中的方法 ```ts ``` ## Nuxt 状态管理 ### Nuxt 内置 useState() `useState` 是一个 SSR 友好的 `ref` 替换。 `useState` 的值将在服务端渲染后（在客户端水合期间）保留，并使用唯一键在所有组件之间共享。 `useState` 相比于 `ref` 一个最大的不同点在于 `useState` 是具有缓存性的，在不同的组件中多次调用同一个 `useState` 结果是一样的，主要用于全局状态的管理。 ```js ``` ### 引入 Pinia 首先，在命令行终端输入 `npm i pinia @pinia/nuxt`。然后，在 `nuxt.config.ts` 文件中配置 `pinia`，同时设置自动导入功能。 ```js export default defineNuxtConfig({ modules: [ // 引入 Pinia [ "@pinia/nuxt", { autoImports: [ // 自动引入 `defineStore(), storeToRefs()` "defineStore", "storeToRefs" ] } ] ] }) ``` 接着，就可以在项目根目录创建 `store/user.ts` 文件定义全局的状态。 ```js export const useUser = defineStore("user", { state: () => ({ ifLogin: false }) }) ``` 最后，在页面中获取用户的登录状态。 ```js // 获取用户的登录状态 const store = useUser() // storeToRefs 可直接使用，因为在 `nuxt.config.ts` 文件中已经设置自动导入 storeToRefs const { isLogin } = storeToRefs(store) ``` # 总结最后，建议大家学习 Nuxt 知识还是以官网为准，因为这是最权威的，时刻与官网保持同步。在掌握最基本的 Nuxt 开发技巧之后，一定要以一个实战项目为出发点，只有这样才能融会贯通，边实战，边查资料，形成一个闭环，从开发，到测试，再到上线，途中一定会遇到很多问题，这便是成长的过程。