Nuxt Content模块使用Slug跳转页面时出现404问题求助

我来帮你一步步排查这个404问题，先看几个关键的地方：

1. 修正列表页（index.vue）的内容查询逻辑 #

你的index.vue里的asyncData有个多余的参数，可能会导致潜在问题：

// 原代码
const articles = await $content('articles', params.slug)
  .only(['title', 'slug'])
  .sortBy('createdAt', 'asc')
  .fetch()

因为index.vue对应/tutorials路径，这个页面并没有slug参数，你传入params.slug会让$content尝试查询articles/[slug]子目录，虽然目前列表能显示，但属于意外生效，建议修正为：

// 修正后
const articles = await $content('articles')
  .only(['title', 'slug'])
  .sortBy('createdAt', 'asc')
  .fetch()

2. 确认Markdown文件的slug匹配规则 #

Nuxt Content识别slug有两种默认逻辑，这是导致404的常见原因：

• 如果md文件没有手动指定slug字段，会自动使用文件名作为slug（比如hello-world.md的slug就是hello-world）
• 如果在md文件的front-matter里写了slug: custom-slug，就会优先使用这个自定义值

请检查你articles目录下的md文件：

• 要么确保文件名和列表页显示的article.slug完全一致
• 要么在每个md文件开头添加front-matter明确指定slug，示例：

---
title: "我的第一篇教程"
slug: first-tutorial
createdAt: 2024-01-01
---
这里是文章正文内容...

3. 给_slug.vue添加错误排查逻辑 #

你的_slug.vue查询代码本身没问题，但可以加上错误处理，方便明确问题根源：

async asyncData({ $content, params, error }) {
  try {
    const article = await $content('articles', params.slug).fetch()
    return { article }
  } catch (err) {
    error({ statusCode: 404, message: '指定文章未找到' })
  }
}

这样如果是内容查询失败，会给出明确提示，帮你区分是路由问题还是内容匹配问题。

4. 验证路由结构与生成情况 #

确保你的pages目录结构完全正确：pages/tutorials/_slug.vue，这个结构会生成/tutorials/:slug的动态路由。
你可以重启开发服务，查看Nuxt启动时的路由日志，确认该动态路由是否被正确注册。

5. 清除缓存重启服务 #

有时候Nuxt的缓存会导致路由或内容不更新，试试：

• 停止当前开发服务
• 删除.nuxt目录和node_modules/.cache目录
• 重新运行npm run dev

按照上面的步骤排查，应该能解决你的404问题。

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