Nuxt如何通过NuxtLink传递隐藏ID同时在URL展示title适配SEO

解决方案 #

你可以通过以下两种方案实现ID隐藏传递，同时保留URL中的title满足SEO要求： #

方案1：路由state传递（最推荐，无额外依赖）

vue-router 内置的state参数会存储在浏览器历史记录中，完全不会出现在URL地址栏，符合隐藏ID的要求。
修改NuxtLink代码如下：

<NuxtLink 
  :to="localePath({
    path: `/blog/${post.title}`,
    state: { postId: post.id }
  })"
>
show Post
</NuxtLink>

在目标文章页面读取ID的代码：

<script setup>
const route = useRoute()
// 直接获取隐藏传递的文章ID
const postId = route.state?.postId
</script>

注意：如果用户手动复制URL到新窗口打开，路由state会丢失，建议加兜底逻辑：拿不到ID时用URL中的title向后端查询对应ID即可。

方案2：sessionStorage存储（支持新窗口打开场景）

如果需要支持用户新窗口打开链接仍能拿到ID，可以用sessionStorage做临时映射存储：

<NuxtLink 
  :to="localePath({ path: `/blog/${post.title}` })"
  @click="() => sessionStorage.setItem(`post_${post.title}`, post.id)"
>
show Post
</NuxtLink>

在目标文章页面读取ID的代码：

<script setup>
const route = useRoute()
// 从路由参数中取URL里的title，对应你的路由规则调整参数名
const postTitle = route.params.title
const postId = sessionStorage.getItem(`post_${postTitle}`)
// 兜底逻辑：拿不到ID时用title向后端查询对应ID
</script>

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