DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to b

記錄一下vue項目運作中遇到的問題

情景：點選按鈕打開一個列印視窗，關閉後再次點選頁面任何地方都無反應，并且列印出異常日志

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
           

原因：加載的元件直接使用了v-if在界面中控制顯示與隐藏，比如

<Test v-if="xxx" />
           

解決：将該元件外面包裹一層即可：

<div v-if="xxx">
    <Text />
</div>
           

或者是在Text元件内部加載一層，以避免vue出錯的情況。網上看到大部分的解決方法是将v-if換成了v-show，使該元件所承載的内容一直在DOM樹中存在，不穩妥

内容參考：https://blog.csdn.net/zi__kang/article/details/107634758