Nuxt3+Prismic动态[uid]页：直输URL加载正常 链接跳转不加载内容

客户端路由跳转时页面主体不渲染，是两个配置和逻辑问题共同导致的：

• Prismic模块配置位置错误：你把Prismic的路由解析规则写在了Nuxt配置的根级clientConfig字段下，@nuxtjs/prismic@3.0.0-alpha.5不会读取该位置的配置。地址栏直连时是服务端直接发起数据请求，不受这个配置影响可以正常渲染；但客户端跳转时模块无法正确匹配Prismic文档与前端路由的映射关系，导致数据拉取异常。
• 页面逻辑缺少响应式关联：[uid].vue中获取的uid是路由参数的一次性静态值，page也是赋值一次的普通常量，客户端路由切换时这两个值不会同步更新，useAsyncData不会触发新页面的数据拉取，SliceZone的渲染判断条件始终不满足，因此不会输出内容。

修正nuxt.config.ts配置 #

Prismic的所有配置必须放在prismic配置项内，你之前遗漏了必填的仓库endpoint字段，同时把clientConfig移到正确位置：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  prismic: {
    endpoint: '填写你的Prismic仓库API地址',
    clientConfig: {
      routes: [
        {
          name: 'home',
          path: '/'
        },
        {
          type: "page",
          path: ":uid"
        }
      ]
    }
  },
  modules: ['@nuxtjs/prismic', '@nuxtjs/style-resources', '@nuxtjs/critters'],
})

修正pages/[uid].vue的响应式逻辑 #

将路由参数、页面数据都改为响应式取值，保证路由切换时自动触发数据拉取和视图更新：

<script lang="ts" setup>
  import { components } from '~/slices';
  const route = useRoute()
  const { client } = usePrismic()

  // 响应式获取路由uid参数
  const uid = computed(() => String(route.params.uid))

  // 绑定响应式key，路由变化时自动重新请求对应页面数据
  const { data: cmsData } = await useAsyncData(
    () => `page-${uid.value}`,
    () => client.getByUID('page', uid.value)
  )

  // 响应式派生页面数据
  const page = computed(() => cmsData.value?.data ?? {title: 'page not found'})
</script>

<template>
  <SliceZone v-if="page?.slices" :slices="page.slices" :components="components" />
</template>

验证注意点 #

• 站内跳转请使用<NuxtLink>组件，不要添加external属性，否则会触发整页刷新，无法走客户端路由渲染逻辑。
• 修改配置文件后需要停止开发服务，删除项目根目录下的.nuxt缓存文件夹，重启服务后再验证效果。

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