首次使用nuxt3，出现的问题记录一下。
说明一下问题，目前需求是从一个分类页面跳转到具体的某个分类详情页
我使用了nuxt3的动态路由来实现，当我需要从页面中获取到这个路由的时候会出现一个经典的水合问题
<span>{{ $route }}</span>
具体报错如下：
chunk-KJX6UARL.js:1449 [Vue warn]: Hydration text content mismatch in <span>:
开始我也不太了解，但我通过查阅一些资料后，发现这个是由于服务端渲染导致该HTML结构现在已经“死”了，。也就是说，它与状态没有任何方式的连接，上面没有监听器。
它只是非交互式的HTML。“活化”结构的过程HTML称为“水合”。
当水合时，Vue不会重新渲染HTML，而是“拾取”。
在了解问题出现的原因后解决思路也就有一些了
第一种就是使用clientOnly来包裹
<ClientOnly>
<span>{{ $route }}</span>
</ClientOnly>
第二种就是github的方案
<span v-if="loading">{{ $route }}</span>
const loading = ref(false)
const nuxtApp = useNuxtApp()
nuxtApp.hook("page:finish", () => {
console.log("页面完全加载")
loading.value = true
})
虽然到最后我发现，我并不需要在html结构中拿到这个id值，但是通过这个问题，对nuxt的一个服务端渲染过程有了更深入的了解
