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. hibernate框架(2)---Hibernate的核心API

    Hibernate的核心API 一般我们通过hibernate进行操作的时候,都会遵循下面的流程,那么接下来我对每一个步骤进行讲解: 1 public void testInsert() { 2 // ...

  2. IT十年经典书籍

    摘自网络,近来在浏览时,发现一个叫做“IT十年经典书籍”的主题.google了一下,实在找不出这个主题的源头出处.不过这个主题中所涉及的每一本书讲出来都是振聋发聩的,大可以作为它那个行业的经典了.  ...

  3. oracle12c创建用户提示ORA-65096:公用用户名或角色无效

    1.背景 以前一直用的是oracle11g,创建用户一直没有问题, 今天在oracle12c上创建用户,报错了.如下图: 我很郁闷, 就打开了oracle官方网站找了下, 发现创建用户是有限制的. 2 ...

  4. Keras 构建DNN 对用户名检测判断是否为非法用户名(从数据预处理到模型在线预测)

    一.  数据集的准备与预处理 1 . 收集dataset (大量用户名--包含正常用户名与非法用户名) 包含两个txt文件  legal_name.txt  ilegal_name.txt. 如下图所 ...

  5. ASP.NET-FineUI开发实践-18

    Grid编辑下垃级联 看了看专业版的例子,分为以下几步,都是前端的 1.编辑父下拉框后,重置子下拉框 2.编辑子下垃框前,通过父下垃框数据得到下垃项,然后绑定数据 所以这里要截取Grid的两个事件,编 ...

  6. CC2530微处理器接口开发技术——信号灯的设计与实现

    本问主要介绍了CC2530处理器的通用输入/输出接口(GPIO),以及GPIO的位操作,理解GPIO的基本原理和功能,最后使用C语言驱动CC2530的GPIO实现对信号灯的控制. CC2530的GPI ...

  7. Ajax的初级使用

    一.AJAX简介(本文的例子都使用的是原生的ajax) 老技术新用法二.异步和同步区别三.XMLHttpRequest对象(面试题) 属性: readyState: 0:未初始化 1:open方法已经 ...

  8. 20.Module 的语法

    Module 的语法 Module 的语法 概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能, ...

  9. Python之使用Pandas库实现MySQL数据库的读写

      本次分享将介绍如何在Python中使用Pandas库实现MySQL数据库的读写.首先我们需要了解点ORM方面的知识. ORM技术   对象关系映射技术,即ORM(Object-Relational ...

  10. ASP.NET资源大全-知识分享

    API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono 平台.官网 ASP.NET WebAPI:快捷创建 HTTP 服务 ...