【开发】【element-ui】记住用户当前选择的Tab页-缓存机制

简述

使用sessionStorage存储单库页面当前选中的Tab页，实现刷新页面后保持Tab不被重置，或者实现跳转到指定Tab页

最后编辑日期: 2022年10月19日

方法文件

新增工具方法类activeTabCacheUtils ,所在位置：src\utils\activeTabCacheUtils.js

添加Tab缓存功能

1. 一级Tab导航页

<template>
	<!-- 各个子模块Tabs -->
	<el-tabs v-model="activeName" @tab-click="handleTabClick">
		<el-tab-pane label="QQ" name="QQ"></el-tab-pane>
		<el-tab-pane label="WW" name="WW"></el-tab-pane>
		...
	</el-tabs>
</template>
<script>
// 公用【Tab缓存】工具方法:
//     getStorageFristTabWithId-带Id校验的获取一级Tab缓存、setStorageFristTab-保存一级Tab缓存
//     setStorageSecondTab-保存二级Tab缓存、clearStorageAllLeveTab-清除所有级别Tab缓存
import { getStorageFristTabWithId, setStorageFristTab, setStorageSecondTab, clearStorageAllLeveTab } from '@/utils/activeTabCacheUtils.js'
export default {
	created() {
		// 给activeName赋值，调用公共方法getStorageFristTabWithId获取一级Tab缓存，默认展示出缓存记录的tab页面
		this.activeName = getStorageFristTabWithId(this.Id, false) || 'perspective'
		// 给activeName赋值之后，调用公共方法setStorageFristTab同步存入一级Tab缓存
        setStorageFristTab(this.Id, this.activeName)
	},
	beforeDestroy() {
    	// 当该单库实例销毁时，清除掉所有级别Tab的sessionStorage缓存
    	clearStorageAllLeveTab()
  	},
	methods: {
		// Tab导航点击切换的时候触发
   		 handleTabClick() {
     	 	// 当切换Tab时，将新的activeName，调用公共方法setStorageFristTab同步存入一级Tab缓存
      		setStorageFristTab(this.Id, this.activeName)
      		// 调用setStorageSecondTab公用方法，只传Id将二级缓存对象obj数据的属性activeSecondTab值置空
      		setStorageSecondTab(this.Id)
    	}
	}
}

2. 二级Tab导航页

<template>
	<!-- 各个子模块Tabs -->
	<el-tabs v-model="activeName" @tab-click="handleTabClick">
		<el-tab-pane label="AAA" name="AAA"></el-tab-pane>
		<el-tab-pane label="BBB" name="BBB"></el-tab-pane>
		<el-tab-pane label="CCC" name="CCC"></el-tab-pane>
		...
	</el-tabs>
</template>
<script>
// 公用【Tab缓存】工具方法: getStorageSecondTabWithId-带Id校验的获取二级Tab缓存、setStorageSecondTab-保存二级Tab缓存
import { getStorageSecondTabWithId, setStorageSecondTab } from '@/utils/activeTabCacheUtils.js'
export default {
	created() {
		// 给activeName赋值，调用公共方法getStorageSecondTabWithId获取二级Tab缓存，默认展示出缓存记录的tab页面
		this.activeName = getStorageSecondTabWithId(this.Id, false) || 'hotAnalysis'
		// 性能模块的锁，有关于页面默认滚动位置的功能设计，获取二级Tab缓存的activeSecondTabScroll属性值来处理
		const tempActiveSecondTabScroll = getStorageSecondTabWithId(this.Id).activeSecondTabScroll || null
		// 最后将处理好的activeName和tempActiveSecondTabScroll 调用公共方法setStorageSecondTab同步更新到二级Tab缓存
        setStorageSecondTab(this.Id, this.activeName, tempActiveSecondTabScroll)
	},
	methods: {
		// Tab导航点击切换的时候触发
   		 handleTabClick() {
     	 	// 当切换Tab时，将新的activeName，调用公共方法setStorageSecondTab同步存入二级Tab缓存
            setStorageSecondTab(this.Id, this.activeName)
    	}
	}
}

3. 一些有默认指定Tab的跳转

// 跳转到单库的方法
    routerLink({ type: type, row: row, item: item }) {
      let tempRouterData = {}
      // 表格内的跳转
      ...
	  if (type === 'sdp') {
        // 在进行页面跳转之前，将想要跳转到的对应Tab信息存到缓存中
        // 调用公共方法setStorageFristTab存入一级Tab缓存,传个Id和想要默认跳到的一级tab对应的activeName
        setStorageFristTab(row.Id, 'sdpa')
        // 调用公共方法setStorageSecondTab存入二级Tab缓存,传个Id和想要默认跳到的二级tab对应的activeName
        setStorageSecondTab(row.Id, 'sdpb')
        // 负载-->单库-性能
        tempRouterData = {
          name: 'commonSingleAllNav',
          params: { id: row.Id },
          query: { id: row.Id, type: 'sdp' }
        }
      // 调用全局挂载的公共方法newWindowRouterPush来实现带有超链接新窗的路由跳转
      this.newWindowRouterPush(tempRouterData)
    }