木灵鱼儿

木灵鱼儿

阅读:2137

最后更新:2021/05/06/ 15:00:44

解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content

出现这个问题,往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的,为什么会不同,举个例子:

我们v-if判断客户端是否存在localstorage.getItem("token"),但实际上服务端永远不可能拿到,因为localstorage是浏览器客户端才有的东西。

那么服务端渲染的dom永远没有,你浏览器上又有了,那不是就产生冲突了。

于是就会报这个错,但是并不会影响页面的渲染。

解决的办法就是将这个v-if放到客户端才进行运行,nuxt提供了一个自定义标签:client-only

表示在这个标签内的内容,只有有客户端才会渲染运行,这样就可以让虚拟dom保持一致,且不会发生冲突。

<client-only>
  ...需要客户端运行的内容
</client-only>

当然,使用了这个标签,可能会导致$nextTick运行好几次。

更多的内容,可以查看下nuxt官方的解释:仅客户端组件

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 2137

相关文章

目录树