Storyblok分组页面动态路由问题：URL路径被追加而非替换

问题出在blok.link.cached_url返回的是相对路径，当你处于/blogs/blog-name这类二级路径下时，NuxtLink会自动将相对路径解析为相对于当前页面的路径，导致所有头部导航链接都被加上了blogs前缀。

方案1：改用Storyblok的full_slug生成绝对路径 #

直接使用blok.link.story.full_slug拼接成根路径开头的绝对路径，full_slug是Storyblok自带的从站点根目录开始的路径标识，能保证导航路径始终正确：

<NuxtLink :to="`/${blok.link.story.full_slug}`" class="hover:text-[#50b0ae]">
  {{ blok.link.story.name }}
</NuxtLink>

方案2：将cached_url转换为绝对路径 #

如果要继续使用cached_url，可以通过代码将相对路径强制转换为绝对路径，避免路径解析错误：

<NuxtLink :to="new URL(blok.link.cached_url, window.location.origin).pathname" class="hover:text-[#50b0ae]">
  {{ blok.link.story.name }}
</NuxtLink>

方案3：调整Storyblok API请求参数 #

将API请求的resolve_links参数从url改为story，这样返回的链接数据会包含更完整的story信息（包括full_slug），从根源避免相对路径问题：

const { data } = await storyblokApi.get("cdn/stories/config", {
  version: "draft",
  resolve_links: "story", // 修改此参数
});

之后同样使用/${blok.link.story.full_slug}作为NuxtLink的to属性值即可。

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