如何在Nuxt3服务端中间件中获取已注册路由

项目结构 #

pages
┣ ab
┃　┣ 028
┃　┃　┣ [id].vue
┃　┃　┗ index.vue
┃　┗　　029
┃  ┣ index.vue
┃  ┗ ranking
┃    ┗ index.vue
┣　index.vue
┣ [id].vue
┗ ranking
  ┣ index.vue
  ┗ [slug].vue
server
┗ middleware
  ┗ redirects.js

需求 #

需要在server/middleware/redirects.js中获取格式如下的已注册页面路由数组：

const availableRoutes = [
'/',
'/:id',
'/ranking',
'/ranking/:slug',
'/ab/028',
'/ab/028/:id',
'/ab/029',
'/ab/029/ranking'
]

实现方案 #

在服务端中间件中，可通过Nuxt提供的应用实例直接获取已注册路由，再过滤转换为目标格式：

export default defineEventHandler(async (event) => {
  // 获取Nuxt应用实例
  const nuxtApp = useNuxtApp(event)
  // 提取所有注册的路由记录
  const allRoutes = nuxtApp.$router.options.routes

  // 过滤并转换路由路径
  const availableRoutes = allRoutes
    // 仅保留页面路由，排除Nuxt内部路由（如/_nuxt、/_error）
    .filter(route => !route.path.startsWith('/_') && route.name?.startsWith('pages/'))
    .map(route => {
      let path = route.path
      // 移除/pages前缀
      path = path.replace(/^\/pages/, '')
      // 将/index结尾的路径转换为父级路径（如/ab/028/index → /ab/028）
      path = path.replace(/\/index$/, '')
      // 空路径替换为根路径/
      return path || '/'
    })
    // 去重处理
    .filter((path, idx, arr) => arr.indexOf(path) === idx)

  // 此时availableRoutes即为目标格式的路由数组
  // 可根据需求进行后续跳转逻辑处理
  console.log(availableRoutes)
})

逻辑说明 #

1. 获取路由实例：通过useNuxtApp(event)在服务端上下文里拿到Nuxt应用的路由实例
2. 过滤有效路由：排除Nuxt内部维护的路由，只保留由pages目录生成的页面路由（通过name前缀pages/判断）
3. 路径格式转换：移除Nuxt自动添加的/pages前缀，处理index.vue对应的路径后缀，确保格式符合预期
4. 去重：避免重复路由条目出现

内容的提问来源于stack exchange，提问作者yasuda_t