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

现在 发现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. Android开发:通过 webview 将网页打包成安卓应用

    商业转载请联系作者获得授权,非商业转载请注明出处. For commercial use, please contact the author for authorization. For non-c ...

  2. Servlet(简介,请求参数,页面跳转,生命周期,创建,配置,ServletContext,线程)

    1.Servlet简介 servlet是java servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序, 主要功能在于交互式浏览和修改数据,生成动态的web内容 服务端运行的 ...

  3. 测试工程师需要了解的shell变量知识

    欢迎访问个人博客 什么是变量 本地变量:手动定义的,在当前系统的某个环境下才能生效,作用范围小 普通变量: 单引号:原字符输出,变量名='变量值' ➜ shell name='tom' ➜ shell ...

  4. CentOS7安装和配置ftp服务

    目录 一.ftp简介 二.安装ftp软件包 1.安装ftp服务器 2.安装ftp客户端 三.配置ftp服务器 1.关闭SELINUX 2.配置ftp数据端口参数 3.开通防火墙 4.启动vsftpd服 ...

  5. Linux你不知道的ping操作

    1.指定ping的次数  -c 选项 ping -c 3 www.baidu.com 2.只返回结果  -q  选项 ping -q -c 3 www.baidu.com 3.指定数据包的大小  -s ...

  6. 深入理解JAVA字符串常量池

    初学JAVA时,在学习如何比较两个字符串是否相等,大量资料告诉我,不能用等于号( = )去比较,需要使用equals方法,理由是String是一个对象,等号此时比较的是两个字符串在java内存堆中的地 ...

  7. 【Code Force】Round #589 (Div. 2) D、Complete Tripartite

    题目链接 大致题意 把一个图分成三块,要求任意两块之间是完全图,块内部没有连线 分析 首先根据块内没有连线可以直接分成两块 假定点1是属于块1的,那么所有与点1连接的点,都不属于块1:反之则是块1的 ...

  8. 一个使用fasttext训练的新闻文本分类器/模型

    fastext是什么? Facebook AI Research Lab 发布的一个用于快速进行文本分类和单词表示的库.优点是很快,可以进行分钟级训练,这意味着你可以在几分钟时间内就训练好一个分类模型 ...

  9. MongoDB操作符之$elemMatch

    问题 如果MongoDB 数据库集合中仅存在一条记录 { "_id" : ObjectId("5e6b4ef546b5f44e5c5b276d"), " ...

  10. OpenCV-Python | 图像的基本操作 十

    目标 学会: 访问像素值并修改它们 访问图像属性 设置感兴趣区域(ROI) 分割和合并图像 本节中的几乎所有操作都主要与Numpy相关,而不是与OpenCV相关.要使用OpenCV编写更好的优化代码, ...