vue_elementui_tab刷新保持当前状态

template中的代码

          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">
              <router-link to="dashboard">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">我的应用</el-menu-item>
            <el-menu-item index="3">
              <!-- <a href="#"></a> -->
              <router-link to="Setmeal">价格</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="helpCenter">帮助中心</router-link>
            </el-menu-item>
          </el-menu>

js data中代码，使用 localStorage.getItem保存当前状态,刷新后tab就会保持当前状态了

  data() {
    return {
      activeIndex: "1",
    };
  },
  
  created() {
    let activeIndex = localStorage.getItem("activeIndex");
    this.activeIndex=activeIndex;
  },
methods: {

 handleSelect(key, keyPath) {
      console.log(key, keyPath, "key, keyPath");
      if (key == "1") {
        this.$router.push("/dashboard");
        localStorage.setItem("activeIndex", key);
      }
      if (key == "2") {
        this.$router.push({
          path: "/myApplylist",
          query: { activeIndexA: "1" }
        });
        localStorage.setItem("activeIndex", key);
        localStorage.setItem("activeIndexA", '1');
      }
      if (key == "3") {
        this.$router.push("/Setmeal");
        localStorage.setItem("activeIndex", key);
      }
      if (key == "4") {
        this.$router.push("/helpCenter");
        localStorage.setItem("activeIndex", key);
      }
    },
}