Vue-element tab选项卡二级页面返回缓存选中页签

需求

我的项目里，有个页面是两个选项卡，两个页签里稍有不同，用的组件，然后各个选项卡都有二级详情页，需求就是从二级详情页返回的时候，要返回上次选中的选项卡页签。

思路

在elementUI中，有一个默认选中的api它就是value / v-model，点击可以查看官网api

方案

我是方案就是通过缓存来记录，在离开本页的时候，存到cookie里，进入本页，获取cookie，我感觉还挺简单的，也很方便。

<template>
  <div class="con">
    <el-tabs type="border-card"  v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="乡村服务队" name="first">
        <Aduit :pagetype="county" />
      </el-tab-pane>
      <el-tab-pane label="企业服务队" name="second">
        <Aduit :pagetype="company" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCookie, setCookie, removeCookie } from "@/utils/Cookie";
import Aduit from "@/components/Aduit";
export default {
  components: {
    Aduit
  },
  data() {
    return {
      county: "county",
      company: "company",
      list: [],
      activeName: 'first'
    };
  },
  created() {
    if(getCookie('activeName')){
      this.activeName =getCookie('activeName')
    }
  },
  methods: {
    handleClick(tab, event) {       
        setCookie('activeName',tab.paneName)      
      }
  }
};
</script>

<style  scoped>
.el-tab-pane{
  width: 100%;
  margin: 0;
  padding: 0;
}
.con{
  padding: 30px 10px;
  box-sizing: border-box;
}
</style>

Cookie.js

import Cookies from 'js-cookie'
export function getCookie(key) {
    return Cookies.get(key)
}

export function setCookie(key,value) {
    return Cookies.set(key, value)
}

export function removeCookie(key) {
    return Cookies.remove(key)
}
  

好了，这次就分享到这里了。