Nuxt：如何知道补水完成了？

Question

情况

我保存了用户访问过的旅游页面，以便在用户返回网站时在主页上显示“最近访问过的旅游”。我用 vuex-persistedstate.

保存的参观游览

代码很简单：<TheVisitedTours v-show=toursRecentlyViewed.length" />

问题

当用户回来时，存在下一个水合作用问题：

Parent:  <div style="display:none;" data-v-24f9a6f4>…</div> 

Mismatching childNodes vs. VNodes:  NodeList(3) [comment, text, comment] (5) [VNode, VNode, VNode, VNode, VNode]
 
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

很明显，SSR 没有 Visited tours 的信息，vuex-persistedstate 在 hydration 完成之前恢复了 visited tours 的信息。

如果我使用 v-show 而不是 v-if 我看到：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

我试着把它包装成 <client-only>...</client-only> 但它没有帮助。

我也试过使用：

mounted () {
  this.isMounted = true
}

和

mounted () {
  window.onNuxtReady(() => {
    this.isMounted = true
  })
}

和

<TheVisitedTours v-if=isMounted && toursRecentlyViewed.length" />

但它也不起作用。

问题

是否有任何事件可以让我知道补水已经完成？如果没有，也许有人有任何解决方法？

非常感谢。

Answer 1

找到解决方案。

我使用的初始代码vue-lazy-hydration

<LazyHydrate when-visible>
  <b-container>

    ......
  
    <client-only>
      <TheVisitedTours v-show=toursRecentlyViewed.length" />
    </client-only>
  </b-container>
</LazyHydrate>

LazyHydrate 删除后，<client-only> 解决了一个问题。

Nuxt：如何知道补水完成了？

Nuxt: How to know that hydration has been finished?

server-side-rendering

vuejs2

nuxt.js