quasar框架切换Tab页使用＜keep-alive＞缓存

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

//布局样式根据需求自己设置
<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切换效果

//自行设置样式
<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>

原文地址：https://blog.csdn.net/Yujis/article/details/138147806

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！