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

现在 发现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. JavaScript(7)--- 继承

    JavaScript(7)--- 继承 概念 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承,继承也是为了数据共享. 之间有讲过j ...

  2. Natas26 Writeup(PHP反序列化漏洞)

    Natas26: 打开页面是一个输入坐标点进行绘图的页面. <html> <head> <!-- This stuff in the header has nothing ...

  3. 阿里淘宝的S1级别bug,到底是谁的锅?

    3月25日,阿里的淘宝APP在IOS系统上出现BUG: 在打开淘宝APP以后,用户就会收到系统弹窗通知:“您使用的程序是测试/内测版本,将于当地时间2020-03-28到期,到期后将无法使用,请尽快下 ...

  4. Splunk 基本使用

    Splunk 作为大数据搜索处理软件,作为行业的翘楚,绝对值得探索和学习,Splunk能实时对任何应用程序.服务器或者网络设备的数据和数据源进行搜索和索引,包括任何位置的日志.配置文件.信息.陷阱和预 ...

  5. cmdb 配置

    cmdb客户端文件夹创建 客户端:client:-bin:启动文件-src:源文件(核心代码)-conf:配置文件-lib:全局的一些方法 和配置-test:测试文件

  6. RabbitMQ 在Ubuntu18.04上的安装

    1.安装erlang由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang2.安装Rabbitmq更新源 ...

  7. 第十六周Java实验作业

    实验十六  线程技术 实验时间 2017-12-8 1.实验目的与要求 (1) 掌握线程概念: 多线程是进程执行过程中产生的多条执行线索,线程是比进程执行更小的单位. 线程不能独立存在,必须存在于进程 ...

  8. 动态网站项目(Dynamic Web Project)CRUD(增删改查)功能的实现(mvc(五层架构)+jdbc+servlet+tomcat7.0+jdk1.8),前端使用JSP+JSTL+EL组合

    代码分享链接 https://pan.baidu.com/s/1UM0grvpttHW9idisiqa6rA    提取码:hx7c 图示           项目结构 1.SelectAllUser ...

  9. 【强烈推荐】适合Flutter初学者的完整项目

    简介 Flutter Fly是什么?Flutter Fly是一款开源的Flutter 项目,非常适合初学者进行学习.App内集成了160+Flutter基础控件的详细介绍及用法,内容来源于:http: ...

  10. 通过ISAPI http协议控制海康摄像头

    一直用海康的SDK进行摄像头控制,但有时候非常不灵活,必须有X86的主机,在嵌入式上面就不行,通过写一个HTTPCLIENT可以通过ISAPI来控制海康的摄像头. 代码如下:git@github.co ...