如何使用 Nuxt/Vue 在页面重新加载时更新组件状态？

Question

我正在构建一个“Nav/Progress Bar”组件，它向用户显示他们在应用程序流程中的进度，使用 Nuxt.js 和 Bootstrap-Vue。当用户跟随 <nuxt-link> 进入下一页时，进度条工作正常。但是，如果用户重新加载页面，进度条将重置为默认状态。

正如您在下面的示例中看到的，我正在使用 Vue 观察器在页面路由更新时更新进度条。然而，这个观察者在页面重新加载时不起作用（我假设这是因为在重新加载页面时，页面路由 没有改变 ）。但是我还能如何强制进度条加载当前状态？

我感觉解决方案应该很简单，但我不知所措。我是 Vue 的新手，所以如果我遗漏了任何明显的内容，请原谅。谢谢！

Image of progress bar on Page One - "Page One Appearance"

Image of progress bar on Page Two - "Page Two Appearance"

这是我的 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>

（我知道这不是最有效的做事方式，使用 Inactive + Active 变量，而不是将 css 更改基于一个变量更改。我只是没有是时候改变它了。）

Answer 1

当用户重新加载页面时，进度条重置为默认状态的原因是因为在 data 属性中，进度指示器是 1。重新加载页面会将数据属性“重置”为其默认值。

但是，您可以使用 created/mounted 生命周期挂钩在重新加载时捕获值。在这里，我决定使用 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，您可以使用逻辑 NOT (!) 运算符来确定它们。

如果你知道pageOneActive = true，那么你可以替换pageOneInactive with !pageOneActive。逻辑 NOT 运算符会将表达式计算为 false。

您可以阅读有关逻辑 NOT 运算符的更多信息 here;

在你的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>

如何使用 Nuxt/Vue 在页面重新加载时更新组件状态？

How Can I Update Component Status on Page Reload Using Nuxt/Vue?

vue.js

server-side-rendering

nuxt.js