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

我会带着你远行 2021-09-18 11:48 541阅读 0赞

### 问题描述： ###

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

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

###  问题分析： ###

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

相同点：均可以实现局部DOM的显示和隐藏

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

### 问题解决： ###

简单来讲，使用v-show代替v-if即可。

经验证，添加结构不会再出现该报错，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][] 效果图

### 备注： ###

因实际开发中，遇见了该问题，参考博友[琥珀光洁-衍钧][-]的博客解决，本人结合自己的理解重新整理一下。

博客链接：[https://blog.csdn.net/changhuzhao/article/details/78739857][https_blog.csdn.net_changhuzhao_article_details_78739857]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/e68f2c39352c4dbe8681770a5a02b663.png
[-]: https://blog.csdn.net/changhuzhao
[https_blog.csdn.net_changhuzhao_article_details_78739857]: https://blog.csdn.net/changhuzhao/article/details/78739857