第一毫秒的内容跳转答案

【问题标题】：Content jump in the first milliseconds第一毫秒的内容跳转
【发布时间】：2021-06-03 15:58:01
【问题描述】：

我正在使用 Nuxt 创建动态页面。在 pages 文件夹中，我有一个文件 _url.vue。它包含以下代码：

<template lang="pug">
    div
        component(
            v-for="component in components"
            :key="`${component.type}-${component.id}`"
            :is="`the-${component.type}`"
        )
</template>
<script>
// import vuex
export default {
    computed: {
        ...mapGetters('app', {
            components: 'getComponents'
        })
    }
}
</script>

setComponents 发生在中间件级别：

export default async function ({ store }) {
    await store.dispatch('app/setPage')
}

在页面加载的最初几毫秒内，内容会随着组件的动态呈现而“跳跃”。如何纠正这种情况？

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js vuex

【解决方案1】：

我会首先尝试手动导入组件，看看这一切是从哪里来的：组件需要一些时间才能注入或显示的布局，只是为了确定。

然后，我在这里讨论过，你可以看看：Vue: wait to render until all components are mounted

那里解释了处理这种微跳的几种方法。您可以选择自己的解决方案。还取决于您将应用用作通用应用还是仅 SPA。

看起来require 是一种方法，但也有一些替代方法。

【讨论】：