使选项卡的材料化状态在页面刷新时不持久

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。wcyankees424想要引起更多关注来回答这个问题。

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

这是materialize's tabs API reference

问题如果刷新网页，则将选项卡活动属性“重置”到其默认位置。因此，我试图弄清楚如何保持导航栏的活动属性的状态。我不知道你们是否会这样说。

我的代码

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

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

 mounted() {
    $(function() {
      var index = "key";
      var dataStore = window.sessionStorage;
      try {
        var oldIndex = dataStore.getItem(index);
      } catch (e) {
        var oldIndex = 0;
      }
      $("#tabs").tabs({
        active: oldIndex,
        activate: function(event, ui) {
          var newIndex = ui.newTab
            .parent()
            .children()
            .index(ui.newTab);
          dataStore.setItem(index, newIndex);
        }
      });
    });
    window.addEventListener("scroll", this.onScroll);
  },

感谢您的任何帮助

Answer 1

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