vue的组件缓存(返回页面不刷新)
每次使用返回是页面总是会刷新 导致了一些体验上的不愉快
现在 发现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的组件缓存(返回页面不刷新)的更多相关文章
- vue中keepAlive的用法[返回页面不刷新]
本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...
- vue中如何缓存一些页面
在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive. 例如: // router.js { path: "/driving_l ...
- 关于微信小程序返回页面时刷新页面的实现
在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...
- vue tab栏缓存解决跳转页面后返回的状态保持
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- Vue keep-alive如何实现只缓存部分页面
prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 在2.1.0版本Vue中 常见用法: // 组件 exp ...
- Vue 页面 前进刷新 后退不刷新(keepAlive)
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- angular页面缓存与页面刷新
angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
随机推荐
- 040.集群网络-CNI网络模型
一 CNM网络模型 1.1 网络模型 生产环境中,跨主机容器间的网络互通已经成为基本要求,更高的要求包括容器固定IP地址.一个容器多个IP地址.多个子网隔离.ACL控制策略.与SDN集成等.目前主流的 ...
- jQuery的简单用法(jQuery的简介,选择器,属性和css,文档处理)
一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaSc ...
- POJ3352 Road Construction Tarjan+边双连通
题目链接:http://poj.org/problem?id=3352 题目要求求出无向图中最少需要多少边能够使得该图边双连通. 在图G中,如果任意两个点之间有两条边不重复的路径,称为“边双连通”,去 ...
- ysoserial-C3P0 分析
环境准备: pom: <!-- https://mvnrepository.com/artifact/com.mchange/c3p0 --> <dependency> < ...
- Windows下命令行MySQL安装
通过zip压缩包文件直接安装 1.下载链接 https://dev.mysql.com/downloads/mysql/ 下载好后解压移动文件夹 2.配环境变量 path路径追加 3.创建初始化文件 ...
- Sublimeの虚拟环境(Venv)设置
这里主要介绍,在使用 Python 虚拟环境(Venv)时,SublimeText 该怎么设置 为什么使用虚拟环境(Venv) 因为,我有洁癖! 我就是喜欢看到,pip list 命令下什么 Pack ...
- rabbitmq++:RabbitMQ的消息确认ACK机制介绍
1):什么是消息确认ACK. 答:如果在处理消息的过程中,消费者的服务器在处理消息的时候出现异常,那么可能这条正在处理的消息就没有完成消息消费,数据就会丢失.为了确保数据不会丢失,RabbitMQ支持 ...
- 在MVC三层项目中如何使用Log4Net
--前期准备(添加到队列中) 0-1在新建后的MVC项目中的[Models]中添加一个类,用于处理异常信息,并继承自HandleErrorAttribute public class MyExcept ...
- OI滚粗记
1) 第一次接触OI是在初一,现在算下都四年了,最开始还是用的Pascal,而现在,Pascal都快被淘汰了.四年的OI生涯让我领会了很多,虽然失去了很多,但是也收获了少,这场名叫OI的生活,我不后悔 ...
- Python第三方包之离线安装
Python第三方包之离线安装 第一步 首先我们得从pypi上先下载要装的第三方包 https://pypi.org/ 第二步(因为下载下来的包可能需要其他包的依赖,那我们依旧要按照第一步再次下载) ...