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

Question

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

问题是页面渲染在跳跃。

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

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

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

我尝试通过 css 网格来解决这个问题 - 定义了模板列行（最小大小），但是组件还没有。所以 wrap div 不会影响子组件。

通过这张图片，标题和幻灯片已经渲染，几秒钟后出现了介绍。

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

标签： javascripthtmlcssvue.jscomponents

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 */
}