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

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

实现方法:使用包裹组件

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

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

5b3acfe2e646a2e198a45f21cbac11a0.png

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

cfb8791346ea93d5f338b9f9b9e7100b.png

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

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

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

  • 首页
  • 关于我们

关于我们数据

var vm=new Vue({

el:'.app',

data:{

currView:"home"

},

components:{

"home":{

template:"#homeTemp"

},

"abount":{

template:"#abountTemp"

}

}

});

858664208b02f4da5aec512b144702a3.png

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533064.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

multisim连接MySQL_首次使用Multisim软件进行电路仿真设计

第一次接触使用Multisim进行电路仿真设计,通过使用这款软件,从中也学习到了很多东西,在这里想简单介绍一下这款软件的最主要也是最重要的功能和特点。创建电路,必定要放置元器件,这就需要用到元器件工具栏,…

mysql到pg怎么高效_干货 | Debezium实现Mysql到Elasticsearch高效实时同步(示例代码)

题记来自Elasticsearch中文社区的问题——MySQL中表无唯一递增字段,也无唯一递增时间字段,该怎么使用logstash实现MySQL实时增量导数据到es中?logstash和kafka_connector都仅支持基于自增id或者时间戳更新的方式增量同步数据。回到问题本身&a…

java thread safe_Java 线程安全 Thread-Safety

在 Java 的线程安全是老生常谈的问题。经常是各种写法说法一大堆,感觉很多的来源都是在面试的时候,很多考官都喜欢问线程安全的问题。起源这个问题的起源就是 Java 是支持多线程的。如果对进程和线程是什么不太清楚的话,可以恶补下大学课程《…

java socket调用接口_Java中socket接口调用

最近一个项目中接口通讯这一块主要是调用银联系统的socket接口,我方是客户端,即发送请求接收返回报文的一方。在贴代码之前,还是要了解一下关于socket的基础知识。Socket的基本概念1.建立连接当需要建立网络连接时,必须…

protobuf java 编译_Maven项目中,编译proto文件成Java类

新建Maven项目新建一个 Maven 项目:pom定义了最小的maven2元素,即:groupId,artifactId,version。 groupId:项目或者组织的唯一标志,并且配置时生成的路径也是由此生成,如org.codehaus.mojo生成的相对路径为&#xff1a…

python灰色关联度分析代码_灰色关联分析法步骤 - osc_uwnmtz9n的个人空间 - OSCHINA - 中文开源技术交流社区...

https://wenku.baidu.com/view/dc356290af1ffc4fff47ac0d.html?rec_flagdefault&sxts1538121950212利用灰色关联分析的步骤是:1.根据分析目的确定分析指标体系,收集分析数据。设n个数据序列形成如下矩阵:其中m为指标的个数&a…

aio 系统原理 Java_Java新一代网络编程模型AIO原理及Linux系统AIO介绍

从JDK 7版本开始,Java新加入的文件和网络io特性称为nio2(new io 2, 因为jdk1.4中已经有过一个nio了),包含了众多性能和功能上的改进,其中最重要的部分,就是对异步io的支持,称为Java AIO(asynchronous IO)。因为AIO的实…

java请假审批怎么实现_java实现请假时间判断

笔记:需求分析:每周上班6天夏季早上8:30-12:00下午14:00-17:30冬季早上8:30-12:00下午14:30-18:00请假最低为半天按照上午8:00-12:00,下午14:00-18:00计算,包括了夏季和冬季时间,规律分布如下public String getDouble(HttpServletRequest request) throws ParseException {//参…

java原子整数_多线程(四、原子类-AtomicInteger)

案例10个线程并发累加一个整数,每个线程累加1000,保证线程安全Unsafe类,来源于sun.misc包。该类封装了许多类似指针操作,可以直接进行内存管理、操纵对象、阻塞/唤醒线程等操作。package com.jane;import java.util.ArrayList;imp…

java 极客_Java极客思维

​开篇介绍大家好,公众号【Java极客思维】近期会整理一些Java高频面试题分享给小伙伴,也希望看到的小伙伴在找工作过程中能够用得到!本章节主要针对Java一些消息中间件高频面试题进行分享。通知:公众号【Java极客思维】正在送书福…

java拼三级魔方_魔方秘籍(详细解法)《三阶》

魔方根据视频理解:上 下 左 右先将白面变好:(1).变一个白十字(如图所示)(2).转好以后检查十字的四个角的颜色(蓝绿红橙)与旁边面上的中心块的颜色是否相同。(有两个相同的时,如果它们相邻,就一个放在后面,一个放在左面…

pHp30充电宝能用快充吗,65W快充 30分钟充满电 是时候淘汰充电宝了吗?

在过去的一年里,手机快充技术有了新的突破,OPPO推出了65W快充。无独有偶,联想拯救者电竞手机的预热宣传中,号称搭载90W快充。有评测称,使用65W快充,30分钟可以充满一块4000mAh容量的电池,使用90…

matlab画圆柱,Matlab 画三维圆柱体

主要学习了画空间圆柱体和空间长方形的绘制方法。有两个surface property:FaceColor和EdgeColor’;先讲FaceColor’,它指定了surface画出曲面的颜色,可以是[r,g,b]的一个向量,分别表示了红绿蓝的颜色配比;也可以是inte…

matlab类间散度矩阵,协方差矩阵和散布矩阵(散度矩阵)的意义

在机器学习模式识别相关算法中,经常需要求样本的协方差矩阵C和散布矩阵S。如在PCA主成分分析中,就需要计算样本的散度矩阵,而有的教材资料是计算协方差矩阵。实质上协方差矩阵和散度矩阵的意义就是一样的,散布矩阵(散度矩阵)前乘以…

把树分成森林 matlab,20170106RF_Matlab 随机森林指的是利用多棵树对样本进行训练并预测的一种分类器,包括两个方面:数据的随 269万源代码下载- www.pudn.com...

文件名称: 20170106RF_Matlab下载 收藏√ [5 4 3 2 1 ]开发工具: matlab文件大小: 441 KB上传时间: 2017-01-06下载次数: 0提 供 者: yanxiu详细说明:随机森林指的是利用多棵树对样本进行训练并预测的一种分类器,包括两个方面:数据的随…

php绘制频谱图,一步一步教你实现iOS音频频谱动画(二)

本文是系列文章中的第二篇,上篇讲述了音频播放和频谱数据计算,本篇讲述数据处理和动画的绘制。前言在上篇文章中我们已经拿到了频谱数据,也知道了数组每个元素表示的是振幅,那这些数组元素之间有什么关系呢?根据FFT的原…

php删除尾部字符,php如何删除字符串末尾字符

我们知道字符串删除字符的方式有好几种,今天就来介绍三种php删除字符串最后一个字符的函数,有需要的小伙伴可以参考一下。方法一:substr()函数substr()函数返回字符串的一部分。语法如下:substr(string string, int start, int [l…

PHP 蒙太奇马赛克拼图,AndreaMosaic制作一幅马赛克拼图

大家在网上应该都见过用很多幅图片拼成的马赛克图片,今天小编就为大家介绍AndreaMosaic制作一幅马赛克拼图方法,不会的朋友快快来学习吧!软件名称:AndreaMosaic(蒙太奇图片制作软件) V6.1.0.4 中文安装免费版软件大小:…

oracle字段类型设计,Oracle字段类型设计与实际业务不符引发的问题

在Oracle表的设计过程中,开发人员总是对字段的类型不以为然,下面来演示一个例子,按照应该设计为number的,结果设计成了varcha在Oracle表的设计过程中,开发人员总是对字段的类型不以为然,下面来演示一个例子…

linux下进程监控6,Linux进程监控技术—精通软件性能测试与LoadRunner最佳实战(6)...

8.2.5 Linux操作系统进程监控技术Linux在进程监控方面同样出色,不仅可以通过图形用户界面的管理工具,还可以用命令方式显示进程相关信息。像“Windows的任务管理器”一样,在RedHat 9中可以通过单击“系统工具”→“系统监视器”,…