quasar框架切换Tab页使用<keep-alive>缓存

写法1 : 使用quasar的q-tabs组件使用方法

typescript 复制代码
//布局样式根据需求自己设置
<template>
	<div class="all-Tabs">
		 <q-tabs v-model="activeTabName"  @update:model-value="selectedChange">
		   <q-tab
		     v-for="(item, index) in cardArr"
		     :key="index"
		     :label="item.label"
		     :name="item.activeTabName"></q-tab>
		 </q-tabs>
		 <div class="bottom">
		    <!-- 放置动态组件... -->
            <!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 -->
		  	<keep-alive>
				 <component
				     :is="activeTabName"
				   ></component>
			</keep-alive>
		 </div>
</div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {
  name: "index",
  components:{
    hourlyQueryCom,
    journalQueryCom,
    historicalDataCom,
    historicalDataMoreCom
  },
   setup(){
   	 const state = reactive({
      activeTabName:'hourlyQueryCom',
      cardArr: [
        {
          label: "观测部查询",
          activeTabName: "hourlyQueryCom",
        },
        {
          label: "日纪要查询",
          activeTabName: "journalQueryCom",
        },
        {
          label: "历史数据单表查询",
          activeTabName: "historicalDataCom",
        },
        {
          label: "历史数据多表查询",
          activeTabName: "historicalDataMoreCom",
        },
      ],
    })
    
	 const selectedChange = (value)=>{
	      state.activeTabName = value
	 }
   return{
   selectedChange,
	...toRefs(state),
	}
   }
</script>

写法2 :手动创建tab切换效果

typescript 复制代码
//自行设置样式
<template>
  <div class="all-Tabs">
      <div class="top">
        <div class="crad"
             :class="{ highLight: whichIndex == index }"
             v-for="(item, index) in cardArr"
             :key="index"
             @click="
             whichIndex = index;
             activeTabName = item.activeTabName;
          ">
          {{ item.label }}
        </div>
      </div>
      <div class="bottom">
        <!-- 放置动态组件... -->
        <!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 -->
        <keep-alive>
          <component :is="activeTabName"></component>
        </keep-alive>
     </div>
  </div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {
  name: "index",
  components:{
    hourlyQueryCom,
    journalQueryCom,
    historicalDataCom,
    historicalDataMoreCom
  },
   setup(){
   	 const state = reactive({
      whichIndex:0,
      activeTabName:'hourlyQueryCom',
      cardArr: [
        {
          label: "观测部查询",
          activeTabName: "hourlyQueryCom",
        },
        {
          label: "日纪要查询",
          activeTabName: "journalQueryCom",
        },
        {
          label: "历史数据单表查询",
          activeTabName: "historicalDataCom",
        },
        {
          label: "历史数据多表查询",
          activeTabName: "historicalDataMoreCom",
        },
      ],
    })
  
   return{
	...toRefs(state),
	}
   }
</script>
<style  scoped lang="scss">
	.highLight{
		border:1px solid red;///自行设置  高亮	
	}
	//自行设置样式
	.bottom{
		
	}
</style>
相关推荐
CodeWithMe11 小时前
【Note】《深入理解Linux内核》 Chapter 15 :深入理解 Linux 页缓存
linux·spring·缓存
大春儿的试验田12 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
likeGhee13 小时前
python缓存装饰器实现方案
开发语言·python·缓存
C1829818257513 小时前
OOM电商系统订单缓存泄漏,这是泄漏还是溢出
java·spring·缓存
西岭千秋雪_16 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
en-route17 小时前
HTTP 缓存
网络协议·http·缓存
苦夏木禾1 天前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明1 天前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
Java初学者小白1 天前
秋招Day14 - Redis - 应用
java·数据库·redis·缓存
奈斯ing1 天前
【Redis篇】数据库架构演进中Redis缓存的技术必然性—高并发场景下穿透、击穿、雪崩的体系化解决方案
运维·redis·缓存·数据库架构