<div>中的水合子节点不匹配：服务器渲染元素包含的子节点少于客户端 vdom

Question

水合子节点不匹配：服务器渲染元素包含的子节点少于客户端 vdom..

Nuxt 链接在 Slick 中使用时不起作用

它复制了这个内容而不光滑.. 我搜了很多.. 有什么问题.. 我用它作为组件

Nuxt3

<div class="products-tabs">
    <!-- tab -->
    <div id="tab1" class="tab-pane active">
        <div class="products-slick" data-nav="#slick-nav-1">
            <!-- product -->
            <div class="product">
                <div class="product-img">
                    <img src="/img/product01.png" alt="">
                    <div class="product-label">
                        <span class="sale">-30%</span>
                        <span class="new">NEW</span>
                    </div>
                </div>
                <div class="product-body">
                    <p class="product-category">Category</p>
                    <h3 class="product-name"><router-link to="product">Product</router-link></h3>
                    <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
                    <div class="product-rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="product-btns">
                        <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to
                                wishlist</span></button>
                        <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to
                                compare</span></button>
                        <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick
                                view</span></button>
                    </div>
                </div>
                <div class="add-to-cart">
                    <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
                </div>
            </div>
            <!-- /product -->
        </div>
    </div>

</div>

Answer 1

我通过注释掉空组件解决了这个问题。

以及它的名字

Answer 2

Hydration Children 不匹配错误主要是由于服务器渲染的 HTML 和客户端虚拟 DOM（Vue 组件）之间不匹配造成的。服务器元素中的子节点数量与客户端不同。检查 Vue 组件结构。