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

Question

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

问题是页面渲染在跳跃。

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

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

这是导致页面跳转，幻灯片向下并出现介绍，这些都有不好的用户体验。

我尝试通过 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 */
}