子路由上的刷新页面不会仅显示该路由的数据答案

【问题标题】：Refreshing page on child route doesn't show the data for just that route子路由上的刷新页面不会仅显示该路由的数据
【发布时间】：2018-12-06 20:01:58
【问题描述】：

我设置了一个代码沙盒。任何帮助将不胜感激。

// 我的 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");
  }

我在这里获取数据并将其传递给子路由。 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

【问题讨论】：

请不要在标题中添加标签，并在问题描述中包含minimal reproducible example，虽然可以添加场外资源作为参考，但理解题。谢谢。
刚刚走出去，但会在一秒钟内发布代码。在刷新或直接访问路线时似乎是一个问题，因此认为在那里将是最重要的。
我不确定是什么问题？您的第一个和第三个示例似乎按预期工作，它们的实施方式有什么问题？
如果你直接去一个路由：kom354q7r3.codesandbox.io/#/year/2002黄色框内没有数据显示。如果我在任何其他路线上刷新也是一样的。显示其他路线数据，但不显示自己的。
它似乎在编辑器视图中工作，但是当您选择全屏选项时，它会显示正在发生的事情。

标签： javascript vue.js axios vue-router

【解决方案1】：

您的问题是因为您仅在调用年视图时才进行 ajax 调用。如果您直接转到 2002 视图，则没有 ajax 调用，因此没有数据可以加载页面。如果您将 ajax 调用添加到 2002 视图中，您可以直接进入页面并查看数据。看起来您正在使用我不太熟悉的 PWA 格式，但如果我这样做，我会让您的 year.vue 查看主要组件，然后他们创建一个子组件，以您的方式填充当年的数据可以使用道具传递链条并且没有任何问题。我也想加入Arrow Syntax，这将消除对const self = this; 的需求，你可以使用它。此外，一次加载一堆组件的数据也是不好的做法，在您的示例中很好，但是如果您有 30 年的数据会发生什么，您的初始加载可能会非常缓慢。在每次通话中加载您需要的内容并进行多次通话。如果您的数据没有太大变化，您可以考虑缓存它而不是一直进行多次调用

【讨论】：