Как я могу обновить статус компонента при перезагрузке страницы с помощью Nuxt / Vue?

Question

Я создаю компонент «Nav / Progress Bar», который показывает пользователям, насколько далеко они продвинулись в потоке приложения, используя Nuxt. js с Bootstrap - Vue. Индикатор выполнения работает нормально, когда пользователь переходит на следующую страницу по <nuxt-link>. Однако, если пользователь перезагружает страницу, индикатор выполнения будет сброшен до состояния по умолчанию.

Как вы можете видеть в приведенном ниже примере, я использую наблюдатель Vue для обновления индикатора выполнения на обновить маршрут страницы. Однако этот наблюдатель не работает при перезагрузке страницы (я предполагаю, что это связано с тем, что при перезагрузке страницы маршрут страницы не изменяется ). Но как еще я могу заставить индикатор выполнения загружать текущий статус?

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

Изображение индикатора выполнения на первой странице - «Внешний вид первой страницы»

Изображение индикатора выполнения на второй странице - «Внешний вид второй страницы»

Вот мой HTML <template>:

<template>
  <div>

    <div class="row">
      <div>
        <b-link to="/" v-bind:class="{ 'font-weight-bold text-primary':   pageOneActive, 'text-secondary font-weight-normal':   pageOneInactive }" >
          Build
        </b-link>
      </div>
      <div>
        <b-link v-bind:to="reviewLink" v-bind:class="{ 'font-weight-bold text-primary': pageTwoActive, 'text-secondary font-weight-normal': pageTwoInactive }" >
          Review
        </b-link>
      </div>
    </div>

    <b-progress :max="2">
      <b-progress-bar :value="progressIndicator"></b-progress-bar>
    </b-progress>

  </div>
</template>

А мой <script выглядит так:

<script>
import Bootstrap from "bootstrap-vue";
export default {
  data() {
    return {
      pageName: this.$nuxt.$route.name,
      progressIndicator: 1,
      progressSuccess: 0,
      pageOneActive: true,
      pageOneInactive: false,
      pageTwoActive: false,
      pageTwoInactive: true,
    };
  },
  watch: {
    "$route.path": function() {
      let pageName = "index";
      let progressIndicator = 1;
      let progressSuccess = 0;
      let pageOneActive = null;
      let pageOneInactive = null;
      let pageTwoActive = null;
      let pageTwoInactive = null;

      function setPageInactive() {
        pageOneActive = false;
        pageOneInactive = true;
        pageTwoActive = false;
        pageTwoInactive = true;
      }

      pageName = this.$nuxt.$route.name;
      console.log(pageName);

      if (pageName === "index") {
        setPageInactive();
        progressIndicator = 1;
        pageOneActive = true;
        pageOneInactive = false;
      } else if (pageName === "review") {
        setPageInactive();
        progressIndicator = 2;
        pageTwoActive = true;
        pageTwoInactive = false;
      }

      console.log(progressIndicator);
      
      this.progressIndicator = progressIndicator;
      this.progressSuccess = progressSuccess;
      this.pageOneActive = pageOneActive;
      this.pageOneInactive = pageOneInactive;
      this.pageTwoActive = pageTwoActive;
      this.pageTwoInactive = pageTwoInactive;
    }
  }
};
</script>

(I знаю, что это не самый эффективный способ делать что-то с неактивными + активными переменными, а не основывать css изменения на одном изменении переменной. У меня просто еще не было времени изменить это.)

Answer 1

Причина, по которой индикатор выполнения сбрасывается в состояние по умолчанию, когда пользователь перезагружает страницу, заключается в том, что в свойстве data индикатор выполнения равен 1. Перезагрузка страницы «сбрасывает» свойства данных до значений по умолчанию.

Однако вы можете захватить значения при перезагрузке с помощью ловушки жизненного цикла created/mounted. Здесь я решил использовать навесной крючок. Вы делаете те же проверки, что и в watcher. Чтобы избежать дублирования, я извлек его в функцию и удалил лишний код. Вы можете вернуть их в исходное состояние, если хотите. Идея та же.

Пусть ваш раздел script будет примерно таким:

<script>
import Bootstrap from "bootstrap-vue";
export default {
  data() {
    return {
      pageName: '',
      progressIndicator: 0,
      pageOneActive: true,
      pageTwoActive: false,
    };
  },
  methods: {
    determinePageProgressIndicator() {
      this.pageName = this.$nuxt.$route.name;
      this.progressIndicator = this.pageName === "index" ? 1 : 2  // this is ok now as there are only two page names. If there are more, the logic will be more complex.
      this.pageOneActive = this.pageName === 'index';
      this.pageTwoActive = this.pageName === 'review';
    }
  },
  mounted() {
    this.determinePageProgressIndicator();
  },
  watch: {
    "$route.path": function() {
      this.determinePageProgressIndicator();
    }
  }
};
</script>

Вам не нужны pageOneInactive и pageTwoInactive, как в JavaScript, вы можете определить их с помощью оператора логического НЕ (!).

Если вы знаете pageOneActive = true, то можете заменить pageOneInactive with !pageOneActive. Оператор логического НЕ будет оценивать выражение как ложное.

Подробнее об операторе логического НЕ можно прочитать здесь ;

В вашем template вы затем выполните

<template>
  <div>

    <div class="row">
      <div>
        <b-link to="/" v-bind:class="{ 'font-weight-bold text-primary':   pageOneActive, 'text-secondary font-weight-normal':   !pageOneActive }" > // replace pageOneInactive
          Build
        </b-link>
      </div>
      <div>
        <b-link v-bind:to="reviewLink" v-bind:class="{ 'font-weight-bold text-primary': pageTwoActive, 'text-secondary font-weight-normal': !pageTwoActive }" > // replace pageTwoInactive
          Review
        </b-link>
      </div>
    </div>

    <b-progress :max="2">
      <b-progress-bar :value="progressIndicator"></b-progress-bar>
    </b-progress>

  </div>
</template>