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. Ajax,JSONP以及跨域问题

    没用过裸的Ajax 也没听过jsonp,也不了解跨域问题,emmm… 参考: http://www.runoob.com/ajax/ajax-tutorial.html https://www.lia ...

  2. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  3. 图片base64上传时可能遇到的问题

    base64上传图片时服务器接到的值可能会丢失字符串 解决方法如下:(分为单个上传和多个上传) <?php $BASE_DIR = "../"; //文件上传 $img = ...

  4. mysql 开发基础系列16 视图

    一. 什么是视图视图是一种虚拟存在的表,行和列数据来自,定义视图的查询中使用的表,并且是在使用视图时动态生成的.优势有: 简单: 使用视图的用户完全不需要关心后面对应的表的结构,关联条件,筛选条件. ...

  5. 经典中的品味:第二章 C++基本的对象,类型和值(上)

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 自律,是以积极而主动的态度,去解决人生的痛苦~ 上一章,我们大谈了Hel ...

  6. Python快速学习02:基本数据类型 & 序列

    前言 系列文章:[传送门] 也就每点一点点的开始咯,“还有两年时间,两年可以学很多东西的” Python ['paɪθən]  n. 巨蛇,大蟒 基本数据类型 变量不需要声明 a=10 # int 整 ...

  7. Linux常用命令之文件和目录处理命令

    目录 1.Linux命令的普遍语法格式 2.目录处理命令 一.显示目录文件命令:ls 二.创建目录命令:mkdir 三.切换目录命令:cd 四.shell内置命令和外部命令的区别 五.显示当前目录命令 ...

  8. vue项目全局引入vue-awesome-swiper插件做出轮播效果

    在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...

  9. TensorFlow中的并行执行引擎——StreamExecutor框架

    背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 在前一篇文章中,我们梳理了TensorFlow中各种异构Device的添加和注 ...

  10. java.lang.NoSuchMethodException: tk.mybatis.mapper.provider.SpecialProvider.<init>()

    Caused by: org.apache.ibatis.builder.BuilderException: Error invoking SqlProvider method (tk.mybatis ...