Обновление страницы на дочернем маршруте не показывает данные только для этого маршрута - PullRequest
Новая
       8

Обновление страницы на дочернем маршруте не показывает данные только для этого маршрута

0 голосов
/ 27 июня 2018

У меня настроены коды и ящик. Любая помощь будет принята с благодарностью.

// Мой Аксиос Геттер в / год 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 Call https://kom354q7r3.codesandbox.io/#/year/2002

Если я посещаю вышеуказанный дочерний маршрут (/ year / 2002), я не получаю никаких данных в желтом поле за 2002 год, но переход к 2001 и 2003 показывает эти данные.

Тогда, если я обновлюсь на одном из других дочерних маршрутов (2001 или 2003), отобразятся данные за 2002 год, а на обновленном маршруте данных не будет.

Если перейти к основному маршруту / маршруту Годы и обновить данные, все данные отображаются правильно.

Кто-нибудь знает, почему это происходит и как это исправить? Я бы хотел, чтобы люди связывались напрямую с конкретными маршрутами, но перенаправление может быть последним средством.

Редактор песочницы: https://codesandbox.io/s/kom354q7r3

1 Ответ

0 голосов
/ 28 июня 2018

Ваша проблема в том, что вы делаете вызов ajax только тогда, когда вызывается представление года. Если перейти непосредственно к представлению 2002 года, ajax-вызов отсутствует, поэтому нет данных для загрузки страницы. Если вы добавите вызов ajax в представление 2002 года, вы можете перейти непосредственно на страницу и просмотреть данные. Похоже, что вы используете формат PWA, с которым я не очень хорошо знаком, но если бы я делал это, я бы сделал ваш year.vue просмотр основного компонента, а затем сделал бы дочерний компонент, который заполняет данные за год таким образом, что вы может пройти по цепочке с помощью реквизита и не иметь никаких проблем. Кроме того, я бы включил Синтаксис стрелки , который устранял бы необходимость в const self = this; среди прочего, вы могли бы просто использовать это. Также плохой практикой является загрузка данных сразу для нескольких компонентов, что хорошо в вашем примере, но что произойдет, если у вас будет 30 лет данных, ваша начальная загрузка, вероятно, будет очень медленной. Загружайте то, что вам нужно, на каждый звонок и совершайте несколько звонков. Если ваши данные не сильно меняются, вы можете заняться их кэшированием, а не совершать многократные звонки все время

...