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. [NewLife.XCode]数据模型文件

    NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...

  2. springboot redis(单机/集群)

    前言 前面redis弄了那么多, 就是为了在项目中使用. 那这里, 就分别来看一下, 单机版和集群版在springboot中的使用吧.  在里面, 我会同时贴出Jedis版, 作为比较. 单机版 1. ...

  3. jvm详情——7、jvm调优基本配置、方案

    堆设置 -Xmn:设置年轻代大小   (整个堆大小=年轻代大小 + 年老代大小 + 持久代大小.持久代一般 固定大小为64m,所以增大年轻代后,将会减小年老代大小.此值对系统性能影响较大,Sun官方推 ...

  4. Go随机数

    Go math/rand包用于生成随机数. 代码: package main import "fmt" import "math/rand" func main ...

  5. java反射注解妙用-获取所有接口说明

    转载请注明出处:https://www.cnblogs.com/wenjunwei/p/10293490.html 前言 最近在做项目权限,使用shiro实现restful接口权限管理,对整个项目都进 ...

  6. C语言学习之assert

    C语言学习之assert assert (编程术语) 编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.断言表示为一些布尔表达式,程序员相信 ...

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

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

  8. springmvc和structs2的区别

    1.从安全性角度分析spring mvc和struts2的区别: spring mvc:controller 1.spring mvc 默认controller是单实例(通过注解@Scope(“pro ...

  9. IE的浏览器模式、文本模式

    最近在部署网页的时候,发现IE下的布局完成混乱. 在改变IE的文本模式后,显示就正常了. IE的浏览器模式,用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userA ...

  10. 安装Ubuntu的Mozilla Firefox的Adobe Flash Player时学习/lib、/usr/lib、/usr/local/lib的区别

    想对比一下Ubuntu和windows下视频效果体验的区别.安装了Ubuntu新版14.04.在之前的学习工程中,从来没想过使用虚拟机里的火狐浏览器看视频浏览网页,所以还真没有安装Flash的Linu ...