javascript - vuejs如何防止渲染页面跳转？

Question

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

问题是页面呈现在跳跃。

例如，在图片中我加载了页眉、介绍、幻灯片组件(以及幻灯片组件之后的更多组件)..

当我使用 import('./...') 时，我看到幻灯片组件首先呈现，然后是页眉，然后是简介组件。 (这个顺序总是变化的)。

这是导致页面跳转、幻灯片下降和介绍出现的原因，这有不好的用户体验。

我尝试通过 css 网格修复此问题 - 定义了模板列行(最小大小)，但是组件还不存在。所以 wrap div 不会影响子组件。

这张图片的标题和幻灯片已经呈现，几秒钟后介绍出现..

知道如何处理这个问题吗？

Answer 1

如果您提前知道组件将被加载，您可以在加载这些组件的父组件中创建包装器 divs。并为这些包装器 divs 添加一个 css grid 系统，定义 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 */
}