vue报错解决-"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before

问题描述：

在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。错误告警如下：

"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before……

---

问题分析：

vue框架中提供了v-if 和 v-show两个指令，用于控制页面不DOM结构的显隐性。

1. 相同点：均可以实现局部DOM的显示和隐藏
2. 不同点：显示和隐藏的原理不同。v-show隐藏元素的本质是给元素本省添加了display = none这个css属性，其实DOM结构仍存在于页面，可以通过F12查看DOM结构。v-if隐藏元素的本质是不加载DOM结构，不能通过F12查看DOM结构之后再v-if绑定的布尔变量为true时，才添加对应的DOM结构。

---

问题解决：

简单来讲，使用v-show代替v-if即可。经验证，添加结构不会再出现该报错，如图：

效果图

---

备注：

因实际开发中，遇见了该问题，参考博友琥珀光洁-衍钧的博客解决，本人结合自己的理解重新整理一下。
博客链接：https://blog.csdn.net/changhuzhao/article/details/78739857