Question

我是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，其中未加载任何内容。

Answer 1

您必须使用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>

Answer 2

要在这种情况下放置的东西称为预加载器，或者如果使用它，也可以使用antd的框架。这是骨骼的链接

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

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

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

在获取数据之前呈现页面

2 个答案: