如何防止渲染页面在Vue.js中跳转？

Question

我有一个Vue应用程序，并且加载了异步组件。

问题在于页面渲染正在跳动。

例如，在图片中，我加载标题，简介，幻灯片组件（以及幻灯片组件之后的更多组件）。

当我使用import('./...')时，我看到slide组件首先呈现，然后是标题，然后是intro组件。 （此顺序始终会更改）。

这是导致页面跳动，幻灯片下降和出现介绍性提示的原因。

我尝试通过css网格修复该问题-定义了模板列行（最小大小），但是组件尚不存在。因此wrap div不会影响子组件。

在此图片上，标题和幻灯片已经呈现，几秒钟后便出现了介绍。.

有什么办法解决这个问题吗？

Answer 1

如果您提前知道将要加载组件，则可以在加载这些组件的父组件中创建包装器divs。并将css grid系统添加到这些包装器divs，定义height等。

这将防止在加载新组件时页面周围的元素跳动。

由于您尚未共享任何代码，因此很难根据您的特定需求定制此答案。我希望它能使您了解该怎么做。

示例

父母

<template>
   <div class="container">
      <div id="header__wrapper">
        <Header />
      </div>
      <div id="intro__wrapper">
         <Intro />
      </div>
     <div id="slide_wrapper">
         <Slide />
     </div>
</template>

CSS

.container {
    grid-template-rows: 1fr 1fr 1fr; /* or whatever you need */
}