vue 实现tab切换保持数据状态


Posted in Javascript onJuly 21, 2020

页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求

实现方法:使用<keep-alive></keep-alive>包裹组件

<el-tabs v-model="activeName" @tab-click="handleClick">
 <el-tab-pane label="记录">
 <keep-alive>
  <child1 v-if="isChildUpdate"></child1>
 </keep-alive>
 </el-tab-pane>
</el-tabs>

列表页面跳转详情 ,列表页面保持上一次操作状态

通过是否加载router-view 和路由元meta设置页面是否需要缓存来实现

vue 实现tab切换保持数据状态

router-view嵌套多层的话,可能要设置多层,然后通过beforeRouteLeave监听路由离开,设置是否缓存

vue 实现tab切换保持数据状态

//从其他页面跳转不需要缓存页面 从详情页面回来则需要缓存

补充知识:vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染

<!--动态组件-component使用-->
 <div class="app">
 <ul>
  <li @click="currView='home'">首页</li>
  <li @click="currView='abount'">关于我们</li>
 </ul>
 <!--通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留-->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>
<script type="text/x-Template" id="homeTemp">
   <h2>首页数据</h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>关于我们数据<input type="text"/></h2>
</script>
<script type="text/javascript">
 var vm=new Vue({
  el:'.app',
  data:{
   currView:"home"
  },
  components:{
   "home":{
     template:"#homeTemp"
   },
   "abount":{
    template:"#abountTemp"
   }
  }
 });
 
</script>

vue 实现tab切换保持数据状态

以上这篇vue 实现tab切换保持数据状态就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
ReactRouter的实现方法
Jan 25 Javascript
vue通过过滤器实现数据格式化
Jul 20 #Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 #Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
You might like
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
Python导入oracle数据的方法
2015/07/10 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python的unittest测试类代码实例
2017/12/07 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python操作kafka实践的示例代码
2019/06/19 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Jupyter加载文件的实现方法
2020/04/14 Python
numpy库reshape用法详解
2020/04/19 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解python中的异常捕获
2020/12/15 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
小学领导班子对照材料
2014/08/23 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server