类似于一个tab切换的作用 他可以缓存组件实例,即缓存组件的状态、数据和DOM结构,可以提高组件的性能 同样也是router路由切换可以使用
效果展示:
代码展示:
<template> // 高亮
<div v-for=item in tabList :key="index" :class=tabChecked===index ? 'colors' : '' >
<span @click="Btn(item.value,index)">{{item.name}}</span> //点击切换下面 不同页面内容
</div>
// 切换的页面
<keep-alive>
<component :is="istabChecked" />
</keep-alive>
// 同样也可以写 (路由切换)
//<keep-alive> <router-view/></keep-alive>
</template>
<script>
import weiDicators from './weiDicators.vue'; //要切换到的第一个页面
import alreadyDicators from './alreadyDicators.vue'; //第二个页面
export default {
components: { //这一步不能忘
weiDicators ,
alreadyDicators
},
data() {
return {
istabChecked: 'weiDicators', //默认第一个页面
tabList: [
{
name: "未录入",
value: 'weiDicators'
},
{
name: "已录入",
value: 'alreadyDicators'
},
],
tabChecked: 0, //高亮
}
methods:{
Btn(value,index){ //tab切换
this.istabChecked=value,
this.tabChecked=index
},
},
}
</script>
<style lang="scss" scoped>
.colors{
color:red
}
</style>
根据需求进行切换即可(如有什么疑问可在下方留言)