Storyblok Nuxt.js 动态路由中 URL 路径拼接问题的解决方案

本文旨在解决在使用 Storyblok 和 Nuxt.js 进行动态路由时，页面导航链接在访问嵌套路由后出现路径被错误拼接的问题。核心内容是确保 `useStoryblok` 函数在获取动态内容时使用绝对路径，从而避免 `NuxtLink` 在复杂路由场景下对链接进行不正确的相对解析，确保网站导航的准确性和一致性。

Nuxt.js 与 Storyblok 动态路由概述

在现代内容管理系统中，动态路由是实现灵活内容展示的关键。结合 Nuxt.js 和 Storyblok，开发者可以轻松构建基于内容的动态页面。例如，一个博客系统通常会有一个 _slug.vue 或 [slug].vue 文件来处理所有的博客文章页面，其 URL 结构可能形如 /blogs/my-first-blog-post。

Storyblok 提供了强大的内容 API，允许我们通过其 useStoryblok 组合式函数（Composition API）或 storyblokApi 客户端来获取内容。当配置 resolve_links: "url" 时，Storyblok 期望返回解析后的 URL 路径，这些路径通常应该是绝对的，以便在导航组件（如 NuxtLink）中正确使用。

遇到的问题：URL 路径错误拼接

许多开发者在实现动态路由时，会遇到一个常见的困扰：当用户访问一个嵌套的动态路由（例如 /blogs/blog-name）后，页面顶部的导航链接（如“首页”、“关于我们”）的 URL 会被错误地拼接上当前动态路由的路径段。例如，点击“首页”链接后，URL 变成了 localhost:3000/blogs/home，而不是预期的 localhost:3000/home。这表明 NuxtLink 在某些情况下将 blok.link.cached_url 视为相对于当前 URL 的路径。

让我们分析一下原始代码片段：

Header 组件中的导航链接：

<script setup>
const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories/config", {
  version: "draft",
  resolve_links: "url",
});
const headerMenu = ref(null);
headerMenu.value = data.story.content.header_menu;
</script>

<template>
  <header class="w-full h-24 bg-[#f7f6fd]">
    <div class="container h-full mx-auto flex items-center justify-between">
      <NuxtLink to="/">
        <h1 class="text-[#50b0ae] text-3xl font-bold">Storyblok Nuxt</h1>
      </NuxtLink>
      <nav v-if="headerMenu">
        <ul class="flex space-x-8 text-lg font-bold">
          <li v-for="blok in headerMenu" :key="blok._uid">
            <NuxtLink :to="blok.link.cached_url" class="hover:text-[#50b0ae]">
              {{ blok.link.story.name }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

在上述代码中，导航链接通过 blok.link.cached_url 获取。理论上，当 resolve_links: "url" 被设置时，cached_url 应该返回如 /home、/about 这样的绝对路径。

动态路由页面（例如 pages/blogs/[slug].vue）中的内容获取：

<script setup>
const storyblokApi = useStoryblokApi();
const route = useRoute();
const slug = route.params.slug;
const story = await useStoryblok("blogs/" + slug, { // 问题所在：相对路径
  version: "draft",
});
</script>

<template>
  <div>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

这里，useStoryblok("blogs/" + slug) 用于获取当前博客文章的内容。"blogs/" + slug 构造了一个相对于 Storyblok 内容树根目录的路径。当 slug 为 blog-name 时，路径为 blogs/blog-name。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

解决方案：使用绝对路径获取 Storyblok 内容

导致导航链接出现问题的原因，通常是 NuxtLink 在某些情况下对相对路径的解析行为。虽然 resolve_links: "url" 应该提供绝对路径，但如果当前路由的 Storyblok 内容获取方式是相对的，可能会间接影响整个应用的路由上下文，导致 NuxtLink 误判。

解决此问题的关键在于，确保在动态路由页面中通过 useStoryblok 获取内容时，提供一个明确的、从 Storyblok 内容树根目录开始的绝对路径。

具体做法是在 useStoryblok 的路径参数前添加一个斜杠 /：

- const story = await useStoryblok("blogs/" + slug, {
+ const story = await useStoryblok("/blogs/" + slug, {
    version: "draft",
  });

修正后的 pages/blogs/[slug].vue 代码：

<script setup>
const storyblokApi = useStoryblokApi();
const route = useRoute();
const slug = route.params.slug;
// 确保使用绝对路径从 Storyblok 获取内容
const story = await useStoryblok("/blogs/" + slug, {
  version: "draft",
});
</script>

<template>
  <div>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

为什么这个改变有效？

通过在 useStoryblok 的路径前添加 /，我们明确地告诉 Storyblok 客户端，我们请求的是一个从其内容树根目录开始的绝对路径（例如，/blogs/blog-name）。

虽然这个改变直接影响的是当前页面内容的获取，但它可能通过以下方式间接解决了导航链接的问题：

1. 明确路由上下文： 在 Nuxt.js 应用程序中，当处理动态路由时，明确地使用绝对路径来获取内容，有助于 Nuxt 路由器和 Storyblok 客户端保持一个清晰的、从网站根目录开始的路由上下文。这可以防止在嵌套路由中出现歧义。
2. resolve_links: "url" 的一致性： 尽管 resolve_links: "url" 旨在提供绝对 URL，但在某些复杂的路由或 Storyblok 客户端配置下，当前页面的相对内容路径可能会影响到其他 API 调用（例如获取 header 菜单）中链接的解析行为。通过强制 useStoryblok 使用绝对路径，可以确保所有 Storyblok 相关的路径解析都基于一个统一的、绝对的根，从而使 blok.link.cached_url 始终返回正确的绝对路径（如 /home、/about）。

简而言之，这个改动确保了整个应用在与 Storyblok 交互时，无论是获取当前页面内容还是解析其他链接，都遵循绝对路径的原则，从而消除了 NuxtLink 出现相对路径解析错误的根源。

注意事项与最佳实践

• 始终优先使用绝对路径： 在 Nuxt.js 中使用 NuxtLink 时，如果链接指向网站的根级别页面或已知绝对路径，最好始终提供以 / 开头的绝对路径。
• 验证 resolve_links 配置： 确保 Storyblok 的 resolve_links: "url" 配置正确，并且实际返回的 cached_url 确实是绝对路径。可以通过在开发环境中打印 blok.link.cached_url 的值来验证。
• 测试所有路由： 在开发和部署过程中，务必彻底测试所有类型的路由，包括根路由、静态路由和动态路由，以及从这些路由导航到其他页面的情况，以确保链接行为符合预期。
• 理解 NuxtLink 行为： NuxtLink 智能地处理内部路由，但它对相对路径的解析会受到当前 URL 路径的影响。理解这一点有助于诊断和解决路由问题。

通过上述调整，您的 Nuxt.js 应用程序在结合 Storyblok 进行动态路由时，将能够更稳定、更准确地处理导航链接，提供更好的用户体验。

以上就是Storyblok Nuxt.js 动态路由中 URL 路径拼接问题的解决方案的详细内容，更多请关注php中文网其它相关文章！