Nuxt动态路由如何仅展示slug参数同时传递id用于API调用

以下是两种适配不同场景的可行方案：

方案1：隐藏params传参（适配纯SPA、无强制刷新需求场景） #

无需修改后端接口，仅调整前端路由配置和跳转逻辑即可：

• 首先将pages目录下原有动态路由文件从[id].vue重命名为[slug].vue，存放路径保持为pages/blog/[slug].vue，Nuxt会自动生成路径格式为/blog/:slug的路由，符合你的路径展示要求
• 修改nuxt-link跳转参数，将id作为非路径绑定的隐藏params传递：

<nuxt-link :to="{ name: `blog-slug`, params: { slug: item.slug, id: item.id }}">Link</nuxt-link>

• 跳转后在目标页面直接通过this.$route.params.id即可获取到id调用后端接口，浏览器地址栏仅会展示slug参数，不会暴露id信息

注意：该方案下用户手动刷新页面时，未绑定到路径的隐藏id参数会丢失，仅适合不需要支持页面刷新的纯客户端跳转场景

方案2：slug-id映射存储（适配支持刷新、SSR/SSG全场景） #

如果需要兼容页面刷新、服务端渲染或静态生成场景，使用该方案：

• 第一步同样将动态路由文件重命名为pages/blog/[slug].vue，保证路由路径格式符合要求
• 维护slug与id的对应映射关系，可根据业务场景选择两种实现方式：
  • 方式A：前端全局存储映射表：在文章列表接口请求时，将所有文章的{slug: id}键值对存入Vuex/Pinia全局状态中，目标页面加载时通过路径中的slug匹配到对应id再调用业务接口
  • 方式B：后端新增轻量查询接口：新增一个通过slug查询对应id的接口，目标页面加载时先拿路径中的slug调用该接口获取id，再调用原有业务接口
• 如果是静态生成（SSG）场景，可以直接在nuxt.config.js的generate配置中预传递id，无需额外查询：

// nuxt.config.js 配置示例
export default {
  generate: {
    async routes() {
      const pages = await fetch('http://my-backend/api/pages/list').then(res => res.json())
      return pages.map(page => ({
        route: `/blog/${page.slug}`,
        payload: { id: page.id }
      }))
    }
  }
}

目标页面的asyncData中直接读取payload即可拿到id：

async asyncData({ params, payload }) {
  // 静态生成场景直接读payload，其他场景走你自己的映射查询逻辑
  const id = payload?.id || getMyMappingId(params.slug)
  const pageData = await fetch(`http://my-backend/api/pages/${id}`).then(res => res.json())
  return { pageData }
}

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