Question

我设置了一个codeandbox。任何帮助将不胜感激。

///我的Axios Getter处于/ year https://kom354q7r3.codesandbox.io/#/year/

  methods: {
    async getTDs() {
      const self = this;
      const response = await axios.get(
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/tds-data.json"
      );
      this.tds = response.data;
      this.y2001 = response.data.y2001;
      this.y2002 = response.data.y2002;
      this.y2003 = response.data.y2003;
      console.log(this.y2001, "this.y2001 From Year.vue");
      console.log(this.y2002, "this.y2002 From Year.vue");
      console.log(this.y2003, "this.y2003 From Year.vue");
    }
  },

  mounted() {
    this.getTDs();
    console.log(this.tds, "From Year.vue - Before Mount");
  }

我在这里获取数据并将其传递给子路由。在/ year / 2001：

  beforeMount() {
    this.tds = this.$parent.y2001;
    console.log(this.tds, "From y2001.vue's Parent ");
  }

然后我将此数据传递给子路线上的子组件。

<TDsByYear :tds="this.tds"></TDsByYear>

//使用/ Year Axios呼叫中的数据的子路由 https://kom354q7r3.codesandbox.io/#/year/2002

如果我访问上述子路线（/ year / 2002），则黄色框内没有显示2002年的任何数据，但导航到2001年和2003年确实显示了数据。

然后，如果我在其他子路由之一（2001或2003）上进行刷新，则会显示2002数据，而在我刷新的路由上则没有数据。

如果我转到/ Years的主要路线并刷新，所有数据都会正确显示。

有人知道为什么会这样以及如何解决吗？我希望人们直接链接到特定路线，但重定向可能是不得已的方法。

沙箱编辑器：https://codesandbox.io/s/kom354q7r3

Answer 1

您的问题是因为仅在调用年视图时才进行ajax调用。如果直接进入2002视图，则不会进行Ajax调用，因此没有数据可以加载页面。如果将ajax调用添加到2002视图中，则可以直接转到页面并查看数据。看来您使用的是我不太熟悉的PWA格式，但是如果执行此操作，我将为您的year.vue查看主要组件，然后将它们制成子组件，以这种方式填充当年的数据可以使用道具沿着链条传递下来，没有任何问题。同样，我将加入Arrow Syntax，这将消除对const self = this;的需求，您可以使用它。一次加载多个组件的数据也是一个坏习惯，这在您的示例中很好，但是如果您拥有30年的数据，那么初始加载可能会非常缓慢。在每个呼叫上加载所需的内容，然后进行多个呼叫。如果您的数据变化不大，您可以考虑对其进行缓存，而不是一直进行多次调用

子路线的刷新页面不仅仅显示该路线的数据

1 个答案: