如何在Nuxt3的nuxt.config.ts中动态处理自定义路由？

问题背景 #

已通过pages:extend钩子手动配置静态自定义路由，现需改为从API获取页面路径、模板关联等信息，动态生成对应路由。

现有静态路由配置（nuxt.config.ts） #

hooks: {
  'pages:extend' (pages) {
    pages.push({
      name: 'Article',
      path: '/sample/content/article',
      file: resolve(__dirname, 'pages/article')
    })
    console.log(pages);
  }
}

API返回示例 #

{
  "pageProperties":{
    "path":"/sample/content/article",
    "templateName":"article",
    "title":"Sample Title",
    "type":"content/components/page/article"
  }
}

动态路由实现方案 #

步骤说明 #

1. 在pages:extend钩子中异步调用API获取页面路由数据
2. 遍历返回的数据，为每个页面生成对应的路由配置并添加到pages数组中

完整配置代码（nuxt.config.ts） #

import { resolve } from 'path'

export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      try {
        // 调用API获取路由数据
        const apiResponse = await fetch('你的API接口地址')
        const pageData = await apiResponse.json()

        // 处理API返回的单个或多个页面数据
        const pageList = Array.isArray(pageData) ? pageData : [pageData]

        // 动态生成路由
        pageList.forEach(item => {
          const { path, templateName, title } = item.pageProperties
          if (!path || !templateName) return

          pages.push({
            name: `${templateName.charAt(0).toUpperCase()}${templateName.slice(1)}`,
            path,
            file: resolve(__dirname, `pages/${templateName}`),
            meta: { title }
          })
        })

        console.log('已生成动态路由:', pages)
      } catch (error) {
        console.error('获取API路由数据失败:', error)
      }
    }
  }
})

注意事项 #

• 确保pages目录下存在与templateName对应的模板文件（例如templateName为article时，需有pages/article.vue）
• 根据API实际需求添加认证信息（如请求头、token等）
• 加入错误处理逻辑，避免API请求失败导致Nuxt启动异常
• 路由名称需保证唯一性，避免与现有路由冲突

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