如何防止渲染頁面在vuejs中跳轉？

Question

我有一個 vue 應用程序，我加載了異步組件。

問題是頁面渲染正在跳躍。

例如，在圖片中我加載了標題、介紹、幻燈片組件（以及幻燈片組件之后的更多組件）。

當我使用import('./...')然后我看到幻燈片組件首先呈現然后是標題然后是介紹組件。 （這個順序總是變化的）。

這是導致頁面跳轉，幻燈片向下，出現介紹，用戶體驗不好。

我嘗試通過 css grid 來解決這個問題 - 定義了模板列行（最小大小）但是，組件還沒有。 所以 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 */
}