Nuxt中如何从URL获取参数？动态useFetch请求报错排查

API 探路者

2026-7-6

问题原因分析

从报错路径/works/SomeAuthor/undefined/api/works/SomeAuthor/SomeTitle可以定位两个核心问题：

config.apiUrl未正确配置
路径中的undefined说明你通过useRuntimeConfig()获取的apiUrl是未定义的。当useFetch使用非http/https开头的相对路径时，Nuxt会自动将其与当前页面的URL拼接，导致最终请求路径变成「当前页面路径 + 错误相对路径」，这个路径不存在，因此触发Vue Router的路由匹配警告。
手动拼接URL的潜在风险
直接拼接字符串时，若route.params中的参数（比如title）在服务器端渲染阶段未完全解析，也会出现拼接异常，但从你的报错信息来看，核心问题还是apiUrl的配置缺失。

解决方案

1. 正确配置Runtime Config

在nuxt.config.ts中添加publicRuntimeConfig，确保apiUrl能在客户端和服务器端正常获取：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: 'http://localhost:8000'
    }
  }
})

2. 安全发起API请求（推荐方式）

使用useFetch的baseURL参数分离API地址和路径，避免手动拼接的错误，代码更简洁可靠：

<script setup>
const config = useRuntimeConfig();
const route = useRoute();

const { data: content } = await useFetch(`/api/works/${route.params.author}/${route.params.title}`, {
  baseURL: config.public.apiUrl
});
</script>

如果坚持手动拼接，建议使用模板字符串+可选链操作符，避免参数为undefined时的异常：

<script setup>
const config = useRuntimeConfig();
const route = useRoute();

const url = `${config.public.apiUrl}/api/works/${route.params.author?.toString() || ''}/${route.params.title?.toString() || ''}`;

const { data: content } = await useFetch(url);
</script>