如何在Nuxt.js中实现类似Stack Overflow的SEO友好URL结构？

1. 路由结构配置 #

首先在Nuxt项目的pages目录下创建如下层级的页面文件：

pages/
└── questions/
    └── [id]/
        └── [[slug]].vue

这里的双层中括号[[slug]]是Nuxt的可选动态路由语法，支持匹配三种路径：

• /questions/{id}
• /questions/{id}/{任意slug}
  所有匹配的请求都会进入同一个页面组件处理，刚好实现你提到的「把/questions/{id}/{title}解析为/questions/{id}」的需求，不会因为slug不同生成独立的新页面。

2. 核心重定向逻辑实现 #

在[[slug]].vue的组件逻辑中，先根据ID拉取对应内容的正确slug，再和当前访问路径的slug做比对，不一致则触发301永久重定向：

<script setup>
const route = useRoute()
// 从路由参数中获取id和当前访问的slug
const questionId = route.params.id
const currentSlug = route.params.slug || ''

// 调用接口获取问题的正确slug（替换为你自己的业务接口即可）
const { data: question } = await useAsyncData(
  `question-${questionId}`,
  () => $fetch(`/api/questions/${questionId}`)
)
const correctSlug = question.value.slug

// 校验slug是否匹配
if (currentSlug !== correctSlug) {
  // 服务端直接返回301重定向到正确URL
  await navigateTo(
    `/questions/${questionId}/${correctSlug}`,
    { redirectCode: 301 }
  )
}
</script>

因为开启了SSR，这部分逻辑会优先在服务端执行，重定向响应直接由服务端返回，不需要等到客户端渲染，完全符合需求。

3. 扩展适配 #

如果需要支持更多内容类型（比如文章、用户主页等），可以将路由调整为pages/[type]/[id]/[[slug]].vue，在逻辑中增加内容类型的判断即可，不用单独为每个类型创建路由文件。

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