物化选项卡在页面刷新时保持活动选项卡答案

【问题标题】：Materialize tabs persist active tab on page refresh物化选项卡在页面刷新时保持活动选项卡
【发布时间】：2020-08-30 12:50:12
【问题描述】：

我正在使用带有物化的 vue.js 构建一个单页应用程序，并且我有一个带有选项卡的导航栏，可以导航到我网站上的不同页面。 Materialize 的选项卡有一个 active 属性，用于显示当前选择的选项卡。到目前为止，一切都完美无缺。

这是materialize's tabs reference

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

我的代码

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

感谢任何帮助

【问题讨论】：

我可以看到直播网站的链接吗？我不使用 vue.js，但我大量使用 M。我从来没有真正需要跨页面保存选项卡状态，但我想，我会使用 JavaScript 以编程方式从本地存储中打开匹配的 ID。
好的。所以它对我来说似乎工作正常，除了控制台错误，直到你导航回主页，然后指示器传播到所有选项卡。所以有几件事：1）选项卡并不是真的要用作导航链接 - 它们用于在同一页面上显示和隐藏内容。我认为这是你问题的根源。 2) 应该只有一个指示器，它会随着标签被按下而移动。你有两个 - 一个嵌套在第一个 li 内，另一个在 UL 中是松散的，应该是这样。不确定那个嵌套的来自哪里，但删除它可以修复网站。
好的，所以我可以得到那个小故障，酒吧在顶部蔓延开来，刚刚开始发生的原因是我试图让活动标签持续存在的最后一件事，但如果我在解释自己的话，我想知道显然问题是如果您转到主页以外的页面刷新页面，您将停留在该页面上（如您所愿），但指示活动选项卡的栏将重置为主页，您说没有办法设置活动选项卡活动选项卡
好的，我明白了。所以我猜这是一个路由器问题，不确定如何修复vue方式，但您只需将当前选项卡的if存储在本地存储中，然后确保您将活动添加到相应的li。这将在视觉上改变指标。我可以稍后再看。
好的，谢谢你的帮助

标签： javascript html jquery vue.js materialize

【解决方案1】：

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

但更多的 Vue 方式是通过客户端存储。检查来自 vue 文档的link。虽然它用于输入字段，但您将了解如何通过在客户端存储中保留引用并在重新加载时从那里获取所需状态来持久化信息。希望对您有所帮助。

【讨论】：

好吧，这确实有帮助，但我来自不同的编程语言，我需要更多的指导，所以我需要从我阅读的内容中获取哪个选项卡处于活动状态，我会做这样的事情。 $(".active").attr('href')); ?那么当页面重新加载时我如何将它分配回来我使用生命周期挂钩但是我如何将类分配给router-link
您可以将其存储在本地存储中吗？就像你刚才必须为相应的路由器链接分配类，对吧？本地存储存储完成了吗？
好的，我已经修改了上面的代码，不，我无法让本地存储工作我不知道为什么我尝试了网站上列出的两种方法
ok 更新所以我得到了本地存储工作但是现在当我尝试通过 id 获取元素以应用活动类时它返回 undefined
我最终弄清楚了，谢谢你，引导我找到答案的人，我会给你 100 分

【解决方案2】：

去掉嵌套在第一个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>

【讨论】：

【解决方案3】：

这就是我最终实现它的方式。首先，您的所有router-links 或<a> 都必须具有唯一的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;
    }
  }

【讨论】：