0

我是 JS 新手，我正在使用 axios 从我的本地 API (Laravel) 获取一些数据

每当我使用 F5 或 CTRL+R 刷新页面时，css 会在内容出现之前加载。这使得页面在加载数据时看起来很丑。

export default {
    data() {
        return {
            user: {},
        }
    },
    async fetch() {
        const data = await this.$axios.$get('/users?name=' + this.$route.params.name)
        this.user = data
        console.log(this.user.name)
    }
}

我能做些什么来防止这种情况发生？即使我添加了自定义加载器，页面也会显示一秒钟，然后加载器会出现并一直存在直到加载。但为什么？以及如何让它看起来更好？

编辑：我知道我需要一个装载机，但显然我执行错了。如前所述，已经有一个加载器，但它只在刷新后 1 秒出现，在加载器出现之前，总是显示空的 css/html 没有加载任何内容。

4

2 回答 2

0

你想在这些情况下放置它的东西称为预加载器，或者如果你正在使用它，你也可以使用来自 antd 的骨架。这是骨架的链接

https://ant.design/components/skeleton/#header

还搜索预加载器，您会在代码笔或其他链接中找到许多并在您的项目中实现这些。

预加载器背后的概念是，它们将作为您页面中的第一件事显示，当内容加载时，您只需将它们完全隐藏或从页面中删除。

于 2020-08-23T17:44:04.660 回答
0

你必须使用 v-if 指令

export default {
    data() {
        return {
            user: {},
            isLoading: false
        }
    },
    async fetch() {
        this.isLoading = true
        const data = await this.$axios.$get('/users?name=' + this.$route.params.name)
        this.user = data
        this.isLoading = false
    }
}

...

<div>
    <div v-if="isLoading">Loader</div>
    <div v-else>Fetched content</div>
</div>
于 2020-08-23T17:03:10.330 回答