停止加载 Vue 页面，直到加载数据（获取）

Question

我试图弄清楚如何在我的获取任务完成之前阻止我的页面加载。这是因为我遇到了一些问题：

• 我不能重复使用相同的数据，所以我必须每次都重新获取它。 （加载后更改视图有效，但重新加载路线会中断）
• 锚链接不起作用，如果我在某些特色项目下方有锚链接#about，则#about 部分将被移到下方，因为特色项目刚刚完成加载。我不能真正使用骨架加载系统，因为项目的数量是动态的。

这是我正在使用的当前代码：

  data() {
    return {
      collections: [],
      items: []
    }
  },
  methods: {
    async fetchCollections() {
      const res = await fetch('http://localhost:4000/collections')
      return await res.json()
    },
    async fetchItems() {
      const res = await fetch('http://localhost:4000/items')
      return await res.json()
    }
  },
  async created() {
    this.collections = await this.fetchCollections()
    this.items = await this.fetchItems()
  }

总而言之，我知道这可能是完全错误的做法，而且我做错了一切。请不要让我感到羞耻，我是 Vue 新手，对 JavaScript 还是有点粗糙。

总结

预期的行为是页面在从后端提取数据后完成加载。

当前行为意味着我的网站将加载，然后在延迟一毫秒后，内容将从完成的提取中弹出。

Answer 1

如果你的路由依赖于某些要获取的数据，那么正确的做法是通过 Vue-router 的 Navigation 守卫。 Here's docs关于这个问题。
这是您的用例的一些代码：

async function fetchData() {
  const resCol = await fetch('http://localhost:4000/collections');
  const resColJson = await resCol.json();
  const resItems = await fetch('http://localhost:4000/items');
  const resItemsJson = await resItems.json();
  return { resColJson, resItemsJson };
}
export default {
  data() {
    return {
      collections: [],
      items: []
    }
  },
  beforeRouteEnter(to, from, next) {
    fetchData().then(({ resColJson, resItemsJson } ) => {
      next((vm) => {
        vm.collections = resColJson;
        vm.items = resItemsJson;
      });
    });
  },
  beforeRouteUpdate() {
    fetchData().then(({ resColJson, resItemsJson } ) => {
      this.collections = resColJson;
      this.items = resItemsJson;
    });
  },
}