第一毫秒内容跳转

Question

我正在使用 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')
}

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

Answer 1

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

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

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

看起来 require 是一个可行的方法，但也有一些替代方法可用。

第一毫秒内容跳转

Content jump in the first milliseconds

javascript

vue.js

vuex

vuejs2

nuxt.js