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

Question

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

我不能重复使用相同的数据，所以我每次都必须重新获取它。（加载后更改视图有效，但重新加载路线会中断）
锚点 link 不起作用，如果我在某些特色项目下方有锚点 link #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 guards。 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;
    });
  },
}

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

Stop Vue page from loading till data (fetch) is loaded

anchor

typescript

vue.js

vue-router

vuejs3

总结