需求
我的项目里，有个页面是两个选项卡，两个页签里稍有不同，用的组件，然后各个选项卡都有二级详情页，需求就是从二级详情页返回的时候，要返回上次选中的选项卡页签。
思路
在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)}
好了，这次就分享到这里了。
