Question

我正在构建一个“ Nav / Progress Bar”组件，该组件使用带有Bootstrap-Vue的Nuxt.js向用户显示他们在应用程序流程中的进展。当用户跟随<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生命周期挂钩捕获重载时的值。在这里，我决定使用已安装的挂钩。您所做的检查与在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>

您不需要像JavaScript中的pageOneInactive和pageTwoInactive，可以使用逻辑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更新页面重新加载时的组件状态？

1 个答案: