middleware

Nuxt 提供了中间件来在导航到特定路由之前运行代码。

Nuxt 提供了一个可定制的路由中间件框架，你可以在整个应用程序中使用它，用于提取在导航到特定路由之前要运行的代码。

这里的中间件不像Vue没有next这个方法

种类

匿名中间件

匿名(或者内联)路由中间件直接在页面内部定义

命名路由中间件

命名路由中间件，放置在 middleware/ 目录下，并在页面上使用时通过异步导入自动加载

全局中间件

全局路由中间件，放置在 middleware/ 目录下，并以 .global 后缀结尾，在每次路由更改时运行。

前面两种类型的路由中间件可以在definePageMeta中定义

中间件的名称会被规范化为 kebab-case 格式：myMiddleware 变成 my-middleware。

使用

路由中间件是导航守卫，接收当前路由和下一个路由作为参数

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === "1") {
    return abortNavigation();
  }
  // 在实际应用中，你可能不会将每个路由重定向到 `/`
  // 但是在重定向之前检查 `to.path` 是很重要的，否则可能会导致无限重定向循环
  if (to.path !== "/") {
    return navigateTo("/");
  }
});

Nuxt 提供了两个全局可用的辅助函数，可以直接从中间件中返回。

1. navigateTo - 重定向到给定的路由

2. abortNavigation - 中止导航，并可选择提供错误消息。

页面使用

<script setup lang="ts">
  definePageMeta({
    middleware: ["auth"],
    // 或 middleware: 'auth'
  });
</script>

中间件返回值

布尔类型

true,不阻止导航,将继续执行下一个中间件函数(如果有的话),或者完成路由导航

重定向

return navigateTo('/')

重定向到给定的路径，并在服务器端发生重定向时设置重定向代码为 302 Found

错误

return abortNavigation()

停止当前的导航

中间件的顺序

中间件按照以下顺序运行：

1. 全局中间件

2. 页面定义的中间件顺序（如果使用数组语法声明了多个中间件）

目录

例如:假设你有以下中间件和组件:

• middleware 目录

middleware/
--| analytics.global.ts
--| setup.global.ts
--| auth.ts

• 页面自定义中间件

<script setup lang="ts">
  definePageMeta({
    middleware: [
      function (to, from) {
        // 自定义内联中间件
      },
      "auth", // 第二个中间件
    ],
  });
</script>

你可以期望中间件按照以下顺序运行：

1. middleware/analytics.global.ts

2. middleware/setup.global.ts

3. 自定义内联中间件

4. middleware/auth.ts

按照我指定的顺序来

• 修改命名规则

middleware/
--| 01.setup.global.ts
--| 02.analytics.global.ts
--| auth.ts

• 这样他会执行 01 再执行 02

INFO

最好两位,因为在 js 中 10 会执行在 2 的前面