“材料化”选项卡在页面刷新时保持活动选项卡

Question

我正在使用带有实现的vue.js构建单页应用程序，并且我有一个带有选项卡的导航栏，可导航到我网站上的不同页面。 Materialize的选项卡具有一个活动属性，该属性显示当前选中的选项卡。到目前为止，所有东西都运行良好。

这是materialize's tabs reference

问题如果刷新网页，则将选项卡活动属性“重置”到其默认位置。因此，我试图找出如何保持navbar的active属性状态，然后将其重新分配给router-link的方法。

我的代码

<ul id="tabs" class="tabs tabs-transparent" :class="{ 'navbar--color': !changeNavColor }">
        <li class="tab" id="home">
          <router-link
            id="home"
            class="link"
            :class="{ 'navbar--color': !changeNavColor }"
            to="/"
          >Home</router-link>
        </li>
        <li class="tab" id="services">
          <router-link
            id="services"
            class="link"
            :class="{ 'navbar--color': !changeNavColor }"
            to="Services"
          >Service</router-link>
        </li>
        <li class="tab" id="Preapproved">
          <router-link
            id="Preapproved"
            class="link"
            :class="{ 'navbar--color': !changeNavColor }"
            to="PreApproved"
          >Get Pre-Approved</router-link>
        </li>

        <li class="tab">
          <router-link
            id="cars"
            class="link"
            :class="{ 'navbar--color': !changeNavColor }"
            to="Cars"
          >inventory</router-link>
        </li>
        <li class="tab">
          <router-link
            id="testimonials"
            class="link"
            :class="{ 'navbar--color': !changeNavColor }"
            to="Testimonials"
          >Testimonals</router-link>
        </li>
      </ul>

 if (localStorage.currentTab) {
      this.currentTab = localStorage.currentTab;
      var activeTab = document.getElementById(this.currentTab);
      activeTab.classList.add("active");
      console.log("saved");
    }
    $(document).ready(function() {
      $("a").click(function(event) {
        this.currentTab = event.target.id;
        console.log(this.currentTab);
      });
    });
    $(document).ready(function() {
      $(".tabs").tabs();
    });
    window.addEventListener("scroll", this.onScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onScroll);
  },
  watch: {
    currentTab(newTab) {
      console.log("watch");
      localStorage.currentTab = this.currentTab;
    }
  }

感谢您的任何帮助

Answer 1

删除嵌套在第一个li内的指示器，并且导航工作正常。

Answer 2

所以我认为您可以通过使用window.location.hash使用哈希机制。您可以在每个标记锚中放置data-toggle属性。然后检查location.hash !== ''

Answer 3

这就是我最终实现此目的的方式。首先，您所有的router-links或<a>必须具有唯一的ID