Vue.js 如何在进入目标路由之前解决vue api请求？

在目标路由组件中，我将发送操作：

// inside vuex store

  actions: {
// I'm receiving this data

    async getData({ commit }) {
      await axios
        .get(`items/data`)
        .then((res) => {
          commit("SET_DATA", res.data);
        })
        .catch((e) => {
          commit("SET_ERRORS", e);
        });
}
+

但问题是，当我到达路线时，动作才被触发。因此，由于api请求需要一些时间才能得到解决，路由目标页将返回未定义的错误，因为呈现该页的数据尚未解决

所以我的问题是，在进入路由之前，如何解决axios请求？

我试过这个方法：

但它不起作用

或者，是否有一种方法可以使用vuex store创建路由解析程序：

像这样：

.

由于JavaScript中没有类似“在完成此HTTP请求之前停止执行”的内容（

wait

非常不同！），所以在呈现目标路由组件之前获取数据的唯一方法是使用

beforeRouteEnter

hook-read

但我认为，以它期望的方式编写组件更容易数据最初不在那里，稍后将可用（可能会显示一些加载指示器）

// inside target routed component.

  created() {
    this.getData();
  },