每次使用返回是页面总是会刷新 导致了一些体验上的不愉快

现在 发现vue中的一个很方便的方法还可以用来优化性能就是：

keep-alive缓存组件

<router-view v-if="!$route.meta.keepAlive"></router-view>

<keep-alive>

      <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

这边我是用作缓存页面，返回不刷新，这里我只缓存keepAlive的值为true的页面

在路由的meta属性加入keepAlive，希望缓存的页面加入vue属性即可

如果需要改变时在

beforeRouteEnter，beforeRouteLeave中写入事件即可

如果页面需要再加载数据则activated事件中写入你的方法

vue的组件缓存（返回页面不刷新）的更多相关文章

  1. vue中keepAlive的用法[返回页面不刷新]

    本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...

  2. vue中如何缓存一些页面

    在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive. 例如: // router.js { path: "/driving_l ...

  3. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

  4. vue tab栏缓存解决跳转页面后返回的状态保持

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  5. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  6. Vue keep-alive如何实现只缓存部分页面

    prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 在2.1.0版本Vue中 常见用法: // 组件 exp ...

  7. Vue 页面 前进刷新 后退不刷新（keepAlive）

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  8. angular页面缓存与页面刷新

      angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...

  9. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

随机推荐

  1. 三万字、91道MySQL面试题。 附PDF

    文末领取面试题 高清PDF 数据库基础知识 1. 为什么要使用数据库 数据保存在内存 优点:存取速度快 缺点:数据不能永久保存 数据保存在文件 优点:数据永久保存 缺点:1)速度比内存操作慢,频繁的I ...

  2. Multi-batch TMT reveals false positives, batch effects and missing values（解读人：胡丹丹）

    文献名:Multi-batch TMT reveals false positives, batch effects and missing values (多批次TMT定量方法中对假阳性率,批次效应 ...

  3. ketika aku 病毒

    #客户中了该病毒,本想找病毒样本来看看,可是没找到样本,发现中这个病毒的案例还是相对较少: #国内好像没有对于该病毒没有比较详尽的病毒信息,特此写一下方便后者: #中招表现:目前所能够发现的是能够对浏 ...

  4. R之Shiny学习笔记

    官方教程:https://shiny.rstudio.com/tutorial/ 中文教程:http://yanping.me/shiny-tutorial/ 英文教程:https://deanatt ...

  5. 终极解决方案之——Centos7由于误删或更新python导致 No module named yum

    之前由于不懂yum和python之间的关系,因为一直在学python3,看到系统里/usr/lib下的python2我就直接删了,结果... 可能还有人是因为python升级的原因,即系统自带的pyt ...

  6. 文件映射（Windows核心编程）

    映射内存的可执行文件和dll 当一个线程调用CreateProcess的时候,系统会执行以下步骤: 系统会先确定CreateProcess所指定的可执行文件的所在位置.如果找不到文件,那么Create ...

  7. 使用FME裁剪矢量shapefile文件

  8. coding++：Spring Boot 全局事务解释及使用（二）

    什么是全局事务: Spring Boot(Spring) 事务是通过 aop(aop相关术语:通知(Advice).连接点(Joinpoint).切入点(Pointcut).切面(Aspect).目标 ...

  9. JavaScript的URLSearchParams方法

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. 一个实现了 URLSearchParams 的对象可以直接用在 for…of 结构中,不需要使用 entries ...

  10. Tainted canvases may not be exported的问题解决

    项目里使用到用canvas生成海报,在toDataURL报了这个错误Tainted canvases may not be exported. 原因就在于使用了跨域的图片,所以说是被污染的画布.解决方 ...