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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
Js 随机数产生6位数字
May 13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
跟我学习javascript的循环
Nov 18 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
react+redux的升级版todoList的实现
Dec 18 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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
一个目录遍历函数
2006/10/09 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
jquery 插件学习(三)
2012/08/06 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Node.js JSON模块用法实例分析
2019/01/04 Javascript
python线程池的实现实例
2013/11/18 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python实现飞行棋游戏
2020/02/05 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
个人自我剖析材料
2014/02/07 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
婚庆主持词大全
2015/06/30 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle