欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中如何实现tabs切换不刷新,以avue-tabs为例

程序员文章站 2024-01-17 21:27:22
...

vue中如何实现tabs切换不刷新,以avue-tabs为例

示例代码

下面展示一些 内联代码片

前端代码
<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 选项还是局部/全局注册。