Nuxt.js报错:The client-side rendered virtual DOM tree is not matching server-rendered content的两种情况解决办法

 

目录

第一种情况: 页面出现瞬间又消失不见

第二种情况: 页面正常加载,有几率刷新mounted方法加载两次,导致页面内容重复渲染;

---

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

, or missing . Bailing hydration and performing full client-side render.

---

第一种情况: 页面出现瞬间又消失不见

解决办法: 是因为在开启了服务的情况下,在pages新建了文件夹. 这时候重启一下服务(即npm run dev)即可解决; 原因是服务端渲染和客户端虚拟DOM树内容不匹配;

第二种情况: 页面正常加载,有几率刷新mounted方法加载两次,导致页面内容重复渲染;

解决办法: 重启服务无效,逐一注释排查发现是option标签,删掉或注释即可解决; 暂未明白原因;

---

拓展:

中文机器翻译:

英文原版: 

图片原文地址:https://github.com/vuejs/vue-router/issues/740