Javascript 具体化选项卡在页面刷新时保留活动选项卡

我正在使用vue.js和materialize构建一个单页应用程序，我有一个带有选项卡的导航栏，可以导航到我网站上的不同页面。Materialize的选项卡有一个活动属性，用于显示当前选定的选项卡。到目前为止，每件事都很完美

这是

问题
如果刷新网页，选项卡的活动属性将“重置”到其默认位置。所以我试图找出如何保持导航栏的活动属性的状态，然后将其重新分配给路由器链接

我的代码

<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>

---

非常感谢您的帮助

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

<ul id="tabs" class="tabs tabs-transparent">
    <li id="tab" class="tab">
        <a href="/" class="link router-link-exact-active router-link-active active">Home</a>
        <li class="indicator"></li> <!-- THIS RANDOM NESTED INDICATOR IS THE ISSUE -->
    </li>
    <li id="tab" class="tab">
        <a href="/Services" class="link">Service</a>
    </li>
    <li id="tab" class="tab">
        <a href="/PreApproved" class="link">Get Pre-Approved</a>
    </li>
    <li id="tab" class="tab">
        <a href="/Cars" class="link">inventory</a>
    </li>
    <li class="indicator" style="right: 488px; left: 0px;"></li> <!-- CORRECT INDICATOR, AUTOMATICALLY GENERATED BY MATERIALIZE -->
</ul>

所以我认为您可以通过使用window.location.hash来使用哈希机制。可以在每个标记定位中放置数据切换属性。只需检查

location.hash！=''

但更多的Vue方式是通过客户端存储。检查vue文档中的its。虽然它是针对输入字段的，但您将了解如何通过在客户端存储中保留引用来持久化信息，并在重新加载时从那里获得所需的状态。希望能有所帮助。
这就是我最终实现此功能的原因。首先，所有
路由器链接
或
必须具有唯一的id


mounted() {
    if (localStorage.currentTab) {
      this.currentTab = localStorage.currentTab;

      var element = document.querySelector(this.currentTab);
      element.classList.add("active");
    }
    $(document).ready(function() {
      $(".tabs").tabs();
      $("a").click(function(event) {
        this.currentTab = "#" + event.target.id;
        localStorage.currentTab = this.currentTab;
      });
    });
  },
  watch: {
    currentTab(newTab) {
      localStorage.currentTab = this.currentTab;
    }
  }

我能看到一个到现场的链接吗？我不使用vue.js，但我使用了很多。我从来没有真正需要跨页面持久化选项卡状态，但我会用JavaScript以编程方式从本地存储中打开匹配的ID。Ok。因此，除了控制台错误之外，它对我来说似乎工作得很好，直到您导航回主页，然后指示器在所有选项卡上展开。所以有两件事：1）标签并不是真正用来作为导航链接的——它们是用来显示和隐藏同一页面上的内容的。我认为这是你问题的根源。2） 应该只有一个指示器，它会随着选项卡的按下而移动。您有两个-一个嵌套在第一个li中，另一个松散在UL中，这是应该的。不确定嵌套的标签是从哪里来的，但删除它会修复站点。好的，我可以得到一个小故障，在这个小故障中，条从顶部蔓延到另一个地方，然后消失，这才刚刚开始发生，原因是我上一次尝试让活动标签保持不变，但idk如果我清楚地解释自己，问题是如果你转到主页以外的页面刷新页面时，您将停留在该页面上（如您所应），但指示活动选项卡的栏将重置为主页，您表示无法将活动选项卡设置为活动选项卡OK I get you。我猜这是一个路由器问题，不确定如何修复vue方式，但您只需要将当前选项卡的if存储在本地存储中，然后确保将active添加到相应的li。这将在视觉上改变指示器。我可以稍后再看一看。好的，谢谢你的帮助。这确实有帮助，但我来自不同的编程语言，我需要更多的指导，所以我需要从我读到的内容中了解哪个选项卡是活动的。我会这样做<代码>$（“.active”）.attr（'href'）？那么，当页面重新加载时，我如何将其分配回我使用的生命周期挂钩，但是我如何将该类分配给
路由器链接
您能够将其存储在本地存储中吗？就像你刚才必须给相应的路由器链接分配类一样，对吗？在本地存储中的存储完成了吗？好的，我已经修改了上面的代码，不，我不能让本地存储工作，我不知道为什么我尝试了站点上列出的两种方法OK更新，所以我得到了本地存储工作，但现在当我尝试通过id获取元素以应用活动类时，它返回UnfineDI，最终解决了这个问题，谢谢大家你在哪里，谁给了我答案，我会给你100分

mounted() {
    if (localStorage.currentTab) {
      this.currentTab = localStorage.currentTab;

      var element = document.querySelector(this.currentTab);
      element.classList.add("active");
    }
    $(document).ready(function() {
      $(".tabs").tabs();
      $("a").click(function(event) {
        this.currentTab = "#" + event.target.id;
        localStorage.currentTab = this.currentTab;
      });
    });
  },
  watch: {
    currentTab(newTab) {
      localStorage.currentTab = this.currentTab;
    }
  }