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…

mysql怎么复制信息_mysql关于复制的一些信息参考

1.主库的复制用户密码修改后,在备库修改复制:stop slave;change master to master_user‘username‘, master_password‘password‘;start slave;2.创建复制子用户及其授权:GRANT REPLICATION SLAVE, REPLICATION CLIENT ON . TO ‘repl‘‘%…

java swing web_Java-JFrame-swing嵌套浏览器步骤

Java-JFrame-swing嵌套浏览器步骤一、使用swing嵌套浏览器要实现的功能:通过java的swing实现在一个窗体中嵌套一个浏览器,可以在这个浏览器中将另一个项目的内容显示出来,只需要回去另一个项目首页的url即可,这样另一个项目就可以…

java thread safe_Java 线程安全 Thread-Safety

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

java 对象复制字段_利用Java反射机制实现对象相同字段的复制

一。如何实现不同类型对象之间的复制问题?1、为什么会有这个问题?近来在进行一个项目开发的时候,为了隐藏后端数据库表结构、同时也为了配合给前端一个更友好的API接口文档(swagger API文档),我采用POJO来对应数据表结构&#xff…

java 类确定运行时间_java回调函数实例:实现一个测试函数运行时间的工具类

下面使用java回调函数来实现一个测试函数运行时间的工具类:如果我们要测试一个类的方法的执行时间,通常我们会这样做:public class TestObject {/*** 一个用来被测试的方法,进行了一个比较耗时的循环*/public static void testMet…

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…

java 结构体数组初始化_C数组结构体联合体快速初始化

背景C89标准规定初始化语句的元素以固定顺序出现,该顺序即待初始化数组或结构体元素的定义顺序。C99标准新增指定初始化(Designated Initializer),即可按照任意顺序对数组某些元素或结构体某些成员进行选择性初始化,只需指明它们所对应的数组…

java override 访问权限_java基础之——访问修饰符(private/default/protected/public)

1. 访问修饰符介绍java中的访问修饰符包含了四种:private、default(没有对应的保留字)、protected和public。它们的含义如下:private:如果一个元素声明为private,那么只有同一个类下的元素才可以访问它。default:如果一…

python中scrapy可以爬取多少数据_python中scrapy框架爬取携程景点数据

———————————————————————————————[版权申明:本文系作者原创,转载请注明出处]文章出处:https://blog.csdn.net/sdksdk0/article/details/82381198作者:朱培 ID:sdksdk0——————…

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的实…

centos mysql 5.5 art_Linux CentOS6.5下编译安装MySQL 5.5.51''''

一、编译安装MySQL前的准备工作安装编译源码所需的工具和库yum install gcc gcc-c ncurses-devel perl安装cmake,从http://www.cmake.org下载源码并编译安装wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.gztar -xzvf cmake-2.8.10.2.tar.gzcd cmake-2.…

java修改默认字符编码_设置默认的Java字符编码?

如何以编程方式正确设置JVM(1.5.x)使用​​的默认字符编码?我已经读过-Dfile.encoding 以前是以往的方式去为旧的JVM …我没有那么奢侈的原因,我不会进入。我努力了:System.setProperty("file.encoding", "UTF-8");并且属…

java api 第一个类是_JAVA常用API:String 类的常用方法

字符串是一个对象,有很多方法可以使用1. length();返回字符串的长度String str "abcd";int len str.length();2. isEmpty(); 仅当当length()为0时返回true,否则返回falseboolean b str.isEmpty();3. getBytes();返回字符串中每个字符的ASCII码(使用平台…

关于java内容_关于java一些概念性的内容

PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象。--------------------------------------------------------------------------------BO:busin…

java订单类_基于Java创建一个订单类代码实例

这篇文章主要介绍了基于Java创建一个订单类代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下需求描述定义一个类,描述订单信息订单id订单所属用户(用户对象)订单所包含的商品(不定数量个商品对…

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 {//参…