vue_elementui_tab刷新保持当前状态

女爷i 2021-11-23 02:58 713阅读 0赞

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">
                  
                  <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);
          }
        },
    }