<template>
<div>
<Card>
<Tabs @on-click="handleTabClick">
<TabPane label="module1"></TabPane>
<TabPane label="module2"></TabPane>
<TabPane label="module3"></TabPane>
<TabPane label="module4"></TabPane>
</Tabs>
<keep-alive>
<component :is="tabs[currentTab]"></component>
</keep-alive>
</Card>
</div>
</template>
<script>
import module1 from './module1'
import module2 from './module2'
import module3 from './module3'
import module4 from './module4'
export default {
name: 'test_page',
components: {
module1,
module2,
module3,
module4
},
data () {
return {
currentTab: 0,
tabs: [
`module1`,
`module2`,
`module3`,
`module4`
]
}
},
methods: {
handleTabClick (name) {
this.currentTab = name
}
}
}
</script>
利用keep-alive实现tabs标签切换时缓存页面
最新推荐文章于 2024-05-15 16:50:47 发布