Nuxt - middleware 路由中间件

官方文档：https://nuxt.com.cn/docs/guide/directory-structure/middleware

1 中间件类别

• 内联路由中间件，直接在页面内定义。
• 命名路由中间件，放置在 middleware/ 目录下，导入在页面中。
• 全局路由中间件，放置在 middleware/ 目录下，并以 .global 后缀结尾，在每次路由更改时运行。

2 中间件执行顺序

全局路由中间件 =》 内联路由中间件 =》 命名路由中间件

3 内联路由中间件

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

4 命名路由中间件

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

middleware/auth.ts：

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

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

• navigateTo - 重定向到给定的路由
• abortNavigation - 中止导航，并可选择提供错误消息。

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

可能的返回值有：

• 无 - 不阻止导航，将继续执行下一个中间件函数（如果有的话），或者完成路由导航
• return navigateTo(‘/’) - 重定向到给定的路径，并在服务器端发生重定向时设置重定向代码为 302 Found
• return navigateTo(‘/’, { redirectCode: 301 }) - 重定向到给定的路径，并在服务器端发生重定向时设置重定向代码为 301 Moved Permanently
• return abortNavigation() - 停止当前的导航
• return abortNavigation(error) - 拒绝当前的导航并提供错误信息

5 全局路由中间件

放置在 middleware/ 目录下，并以 .global 后缀结尾

middleware/
--| analytics.global.ts