Nuxt3 SSR 每个文件有多个路由？

Question

我正在使用 Nuxt3、Vue3 和 Laravel 后端开发一个带有 SSR 的新应用程序。我想知道是否有一种方法可以将多个路由/api 调用添加到每个服务器/api 文件中的一个 defineEventHandler 函数。也许这不是好的做法？这是我到目前为止所拥有的：

server/api/backend.js

    export default defineEventHandler(async (event) =>{

      const { rcn } = getQuery(event)

      const config = useRuntimeConfig()

      const uri  = `${config.apiBase}/api/${rcn}`
      const data = await $fetch(uri)
      return data
   })

我想我可以根据

event.req.url

中的内容做 if/else 语句，但这看起来很乏味。同样，如果正确的设置方法是为每条路线创建一个新的 file.js，请告诉我。似乎应该有更好的方法将它们组合在一起？

Answer 1

我认为你想要实现的是捕获所有路线（见文档）

用法：

~/server/api/all-routes/[...].ts

import { createRouter, defineEventHandler, useBase } from 'h3';
const router = createRouter();

router.get(
  '/hello',
  defineEventHandler((event) => {
    return 'Hello from hello API';
  })
);
router.get(
  '/world',
  defineEventHandler((event) => {
    return 'World from World API';
  })
);

export default useBase('/api/all-routes/', router.handler);

注：

确保你的 catch all routes 文件中有这个。否则，它不会工作。

export default useBase('/api/all-routes/', router.handler);

router.get('/api/')

- 用于 GET 方法

router.post('/api/')

- 用于 POST 方法

另外两个用于

update

&

delete

在客户端调用API。

<script setup>
const { data: hello } = await useFetch('/api/all-routes/hello');
const { data: world } = await useFetch('/api/all-routes/world');
</script>
<template>
  <div>
    <div>
      {{ hello }}
    </div>
    <div>
      {{ world }}
    </div>
  </div>
</template>

查看工作示例 https://stackblitz.com/edit/nuxt-starter-7we3jp?file=server/api/all-routes/[...].ts