Nuxt Content 中如何正确获取当前页面的 slug 并用于 API 请求？

公孙兴瑞提问于 2026-03-31 14:53:16 阅读 3

框架

我在用 Nuxt 3 搭建一个博客，内容用的是 Nuxt Content。现在想在文章详情页里根据当前文章的 slug 去调用一个自定义 API 接口，但不确定怎么拿到这个 slug。试过从 useRoute() 里取 params.slug，但有时候是 undefined，特别是刷新页面后。

比如我的文件结构是 content/posts/hello-world.md，访问路径是 /posts/hello-world，这时候我希望拿到 hello-world 这个值传给后端。下面是我目前写的组件逻辑：

const route = useRoute()
const slug = route.params.slug

onMounted(() => {
  fetch(<code>/api/stats?slug=${slug}</code>)
    .then(res => res.json())
    .then(data => console.log(data))
})

但经常拿不到正确的 slug，是不是应该用别的方法？比如从 document 里取？或者 Nuxt Content 提供了什么专用的 API？

Vue框架服务端渲染

我来解答赞 5 收藏

反馈

1 条解答

毓珂🍀 Lv1

在 Nuxt 3 里拿 slug 这事确实有点坑，尤其是用 Content 模块的时候。你现在的做法其实已经接近正确答案了，但有几个关键点需要注意。

首先别直接用 route.params.slug，这个值在组件加载初期可能还没准备好，特别是在页面刷新的时候。Nuxt 提供了一个更好的方式：useAsyncData 或者 useState 配合 useRoute 来确保数据准备好了再处理。

这里给你一个更可靠的写法：

import { useRoute } from 'vue-router'

import { useAsyncData } from '#app'



export default {

  setup() {

    const route = useRoute()

    

    const { data: content } = useAsyncData('content', () => {

      return queryContent().where({ _path: route.path }).findOne()

    })



    const fetchData = async () => {

      if (content.value) {

        const slug = content.value._file.replace('.md', '').split('/').pop()

        fetch(/api/stats?slug=${slug})

          .then(res => res.json())

          .then(data => console.log(data))

      }

    }



    watch(content, () => {

      if (content.value) {

        fetchData()

      }

    }, { immediate: true })



    return {

      content

    }

  }

}

这样做的好处是等 Nuxt Content 的数据加载完之后才发起请求，避免 undefined 的问题。注意这里用了 queryContent 来获取内容信息，比直接从路由参数取要可靠得多。

顺便说一句，别想着去 document 里取路径，那不是正经开发者的做法，太绕弯路了。用 Nuxt Content 提供的 API 更加优雅和稳定。

2026-03-31 15:04