vue如何和ionic的缓存机制一样,可以缓存页面,在A页面跳转至B页面后返回A页面时A页面的数据还在?
  • 在app.vue中将router-view使用keep-alive包起来,使用v-if来判断使用使用被缓存的组件,在keep-alive外面也需要写相同的router-view,用来处理不被缓存的视图组件。

  • 在路由配置里面对需要被缓存的页面进行配置。如下图所示:

  • 这里注意:transition标签下面只能有一个自元素标签,所以使用div将里面的元素包起来。
  • 页面缓存后,页面的部分内容又需要进行更新,在这种情况下要如何处理:需要将更改的信息写在activated里面,注意它不是在method里面。例如:
             activated(){//缓存页面但是还有部分数据需要改动}

vue缓存页面的更多相关文章

  1. vue缓存页面【二】

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法:运行结果描述:input输入框内,路由切换输入框内部的内容不会发生改变.在keep-alive标 ...

  2. vue缓存页面之后的生命周期

    一:<router-view :key="key"></router-view> 没有作缓存时的状态 created :某单页面刚刚创建时候的回掉函数. m ...

  3. 六、vue如何缓存页面

    vue如何和ionic的缓存机制一样,可以缓存页面,在A页面跳转至B页面后返回A页面时A页面的数据还在? 在app.vue中将router-view使用keep-alive包起来,使用v-if来判断使 ...

  4. 关于vue里页面的缓存

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...

  5. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

  6. Vue 缓存当前页面keep-alive

    需求: 产品经理在列表页(几千个数据,n个page)点击某一项进去到详情页后,再返回到列表页发现页面回到了第一页,找不到之前的查看的是哪一条了,为了方便咋公司产品经理,返回列表页时需要记住之前的pag ...

  7. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  8. Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载

    Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...

  9. Vue路由开启keep-alive缓存页面

    mode:hash模式下: HTML部分: <template> <div id="app"> <keep-alive> <!--使用ke ...

随机推荐

  1. PythonDay02——编程语言、python介绍以及安装解释器、运行程序的两种方式、变量

    一.编程语言 1.1 机器语言:直接用计算机能理解的二进制指令编写程序,直接控制硬件 1.2 汇编语言:用英文标签取代二进制指令去编写程序,本质也是直接控制硬件 1.3 高级语言:用人能理解的表达方式 ...

  2. [Java 泥水匠] Java Components 之二:算法篇之项目实践中的位运算符(有你不懂的哦)

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...

  3. ZOJ Problem Set - 3713

    题意:给定一个字符串,用字符串ASC2码16进制数输出 ,并在前面输出字符串长度的16进制,输出长度的规则是 先输出长度的二进制数的后七位的十六进制(如果左边还有1 则这在后七位前面加上个1再输出  ...

  4. mysql年初至今聚合

    年初至今聚合和滑动聚合类似,不同的地方仅在于统计的仅为当前一年的聚合.唯一的区别体现在下限的开始位置上.在年初至今的问题中,下限为该年的第一天,而滑动聚合的下限为N个月的第一天.因此,年初至今的问题的 ...

  5. mcrypt加密以及解密过程

    Mcrypt库支持20多种加密算法和8种加密模式,具体可以通过函数mcrypt_list_algorithms()和mcrypt_list_modes()来显示 Mcrypt扩展库可以实现加密解密功能 ...

  6. TCP中往返时间的估计与超时

    往返时间的估计与超时   TCP采用超时/重传机制来处理报文段的丢失问题.尽管这在概念上面很简单,但是在实际中还是会产生很多微妙的问题.最明显还是超时时间间隔的设置.很显然,这个时间间隔肯定会大于RT ...

  7. nginx实现动态/静态文件缓存(week4_day1_part2)-技术流ken

    nginx实现静态文件缓存实战 1.nginx静态文件缓存 如果要熟练使用nginx来实现文件的缓存,那下面的几个指令你必须要牢记于心 指令1:proxy_cache_path 作用:设置缓存数据的相 ...

  8. LeetCode链表解题模板

    一.通用方法以及题目分类 0.遍历链表 方法代码如下,head可以为空: ListNode* p = head; while(p!=NULL) p = p->next; 可以在这个代码上进行修改 ...

  9. yarn install npm install (转载)

    解决 npm i 及 yarn install 都无法进行安装的问题和node-sass安装太慢的问题 2018年03月31日 19:49:07 Johnny丶me 阅读数:2906更多 所属专栏:  ...

  10. FastJson序列化Json自定义返回字段,普通类从spring容器中获取bean

    前言: 数据库的字段比如:price:1 ,返回需要price:1元. 这时两种途径修改: ① 比如sql中修改或者是在实体类转json前遍历修改. ②返回json,序列化时候修改.用到的是fastj ...