Vue-element tab选项卡二级页面返回缓存选中页签_vue配合element-ui的tabs动态设置keep-alive动态缓存2级路由页面

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

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

思路

在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;
最后
--

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lnVUFXMUlsN2FRMlNlT2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)



SWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)