示例代码
下面展示一些 内联代码片。
前端代码
<template>
<div class="main">
<avue-tabs ref="tabs" :option="tabs.option" @change="handleChange" />
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<qc-retrieval v-if="'1' === tabs.type.value" />
</keep-alive>
<keep-alive>
<qc-search v-if="'0' === tabs.type.value" />
</keep-alive>
</div>
</template>
标签使用如下:
使用失活标签包裹,可实现切换时刷新的问题:<keep-alive>
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<qc-retrieval v-if="'1' === tabs.type.value" />
</keep-alive>
注意这个 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
本文介绍在Vue中利用avue-tabs组件实现tabs切换时页面不刷新的方法,通过使用<keep-alive>标签缓存失活的组件,确保了切换过程中的数据状态得以保持。
3966

被折叠的 条评论
为什么被折叠?



