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

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

问题是页面渲染正在跳转

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

当我使用导入（“./…”）时，我看到幻灯片组件首先呈现，然后是标题，然后是简介组件。（此顺序始终处于更改状态）

这会导致页面跳转，幻灯片向下，出现介绍，这会导致用户体验不好

我试图通过css网格定义的模板列行（最小大小）来解决这个问题，但是组件还没有出现。因此，wrap div不会影响子组件

通过这张图片，标题和幻灯片已经呈现出来，几秒钟后，介绍就出现了

---

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

如果您提前知道要加载组件，您可以在加载这些组件的父组件中创建包装器

divs

。并将

css网格

系统添加到这些包装器

div

，定义

高度

等

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

由于您没有共享任何代码，因此很难根据您的特定需求定制此答案。我希望它能让你知道该怎么做

例子 家长

CSS

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