Nuxt 提供了一个可定制的 路由中间件 框架，您可以在整个应用程序中使用，非常适合提取您希望在导航到特定路由之前运行的代码。

路由中间件有三种类型：

1. 匿名（或内联）路由中间件直接在页面内定义。
2. 命名路由中间件，放置在 middleware/ 中，并在页面上使用时通过异步导入自动加载。
3. 全局路由中间件，放置在 middleware/ 中，带有 .global 后缀，并在每次路由更改时运行。

前两种路由中间件可以在 definePageMeta 中定义。

用法

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

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

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

1. navigateTo - 重定向到给定路由
2. abortNavigation - 中止导航，并可选择性地提供错误消息。

与 vue-router 的 导航守卫 不同，第三个 next() 参数不会传递，重定向或路由取消通过从中间件返回值来处理。

可能的返回值有：

• 无（简单的 return 或根本不返回） - 不会阻止导航，并将移动到下一个中间件函数（如果有），或完成路由导航
• return navigateTo('/') - 重定向到给定路径，如果重定向发生在服务器端，将设置重定向代码为 302 Found
• return navigateTo('/', { redirectCode: 301 }) - 重定向到给定路径，如果重定向发生在服务器端，将设置重定向代码为 301 Moved Permanently
• return abortNavigation() - 停止当前导航
• return abortNavigation(error) - 使用错误拒绝当前导航

中间件顺序

中间件按以下顺序运行：

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

例如，假设您有以下中间件和组件：

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

definePageMeta({
  middleware: [
    function (to, from) {
      // 自定义内联中间件
    },
    'auth',
  ],
});

您可以预期中间件按以下顺序运行：

1. analytics.global.ts
2. setup.global.ts
3. 自定义内联中间件
4. auth.ts

全局中间件排序

默认情况下，全局中间件根据文件名按字母顺序执行。

然而，有时您可能希望定义特定的顺序。例如，在最后一个场景中，setup.global.ts 可能需要在 analytics.global.ts 之前运行。在这种情况下，我们建议为全局中间件添加“字母”编号前缀。

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

中间件何时运行

如果您的站点是服务器渲染或生成的，初始页面的中间件将在页面渲染时和客户端再次执行。如果您的中间件需要浏览器环境，例如如果您有一个生成的站点、积极缓存响应或想从本地存储中读取值，这可能是必要的。

然而，如果您想避免这种行为，可以这样做：

export default defineNuxtRouteMiddleware(to => {
  // 在服务器上跳过中间件
  if (import.meta.server) return
  // 完全在客户端上跳过中间件
  if (import.meta.client) return
  // 或仅在初始客户端加载时跳过中间件
  const nuxtApp = useNuxtApp()
  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
})

即使您在服务器上的中间件中抛出错误，并渲染错误页面，这也是如此。中间件仍将在浏览器中再次运行。

动态添加中间件

可以使用 addRouteMiddleware() 助手函数手动添加全局或命名路由中间件，例如在插件中。

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-test', () => {
    console.log('这个全局中间件是在插件中添加的，并将在每次路由更改时运行')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('这个命名中间件是在插件中添加的，并将覆盖任何同名的现有中间件')
  })
})

示例

-| middleware/
---| auth.ts

在您的页面文件中，您可以引用此路由中间件：

definePageMeta({
  middleware: ["auth"]
  // 或 middleware: 'auth'
})

现在，在导航到该页面之前，auth 路由中间件将被运行。

在构建时设置中间件

您可以在 pages:extend 钩子中添加命名路由中间件，而不是在每个页面上使用 definePageMeta。

import type { NuxtPage } from 'nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      function setMiddleware (pages: NuxtPage[]) {
        for (const page of pages) {
          if (/* some condition */ true) {
            page.meta ||= {}
            // 请注意，这将覆盖页面中 `definePageMeta` 中设置的任何中间件
            page.meta.middleware = ['named']
          }
          if (page.children) {
            setMiddleware(page.children)
          }
        }
      }
      setMiddleware(pages)
    }
  }
})