Materialize tabs persist active tab on page refresh

Question

I am building a single page application using vue.js with materialize and I have a navbar with tabs to navigate to different pages on my website. Materialize's tabs has an active property that displays which tab is currently selected. Every thing this far works perfectly.

This is materialize's tabs reference

The Issue
If you refresh the web page the tabs active property 'resets' to its default position. So I am trying to figure out how to persist the state of the navbar's active property and then reassign it to router-link.

My Code

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

any help is appreciated

Answer 1

This is how I ended up implementing this. First all of your router-links or <a> have to have unique id's

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