Vue2.0 实现页面缓存和不缓存的方式


Posted in Javascript onNovember 12, 2019

1、在app中设置需要缓存的div

<keep-alive>//缓存的页面
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面

2、在路由router.js中设置.vue页面是否需要缓存

{
  path: '/home',
  component: home,
  meta: { keepAlive: true },//当前的.vue文件需要缓存
},
{
  path: '/notice',
  component: notice,//当前页面不需要缓存
}

3、从缓存页面跳转到不缓存页面,或者从不缓存页面跳转到缓存页面的时候,会发现watch是不能监听路由的,是因为缓存和不缓存页面分别在不同的div里面,一个div里面是不可能监听到另一个div的路由的,所有需要把监听的路由都加上缓存(在路由添加 meta: { keepAlive: true }),路由在缓存页面之间进行跳转的时候,就可以通过监听路由来进行判断数据是否需要更新。

vue keep-alive 缓存后, 进入缓存页需要再次更新

beforeRouteEnter (to, from, next) {
 next (vm => {
   vm.getData()
 })
},
 mounted: function () {
  this.getData()
}

keep-alive 数据更新问题

在项目中使用<keep-alive>包含<router-view>实现页面缓存,加速页面加载,

同时,这种方式带来一些弊端,请看如下大神解释:

****************************************************************************

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。

当再次进入(前进或者后退)时,只触发activated。

****************************************************************************

这就带来一个问题,之前在项目中使用mounted在页面加载时获取数据,使用<keep-alive>后方法不再生效,

根据上面的解释,将mounted替换为activated即可。

以上这篇Vue2.0 实现页面缓存和不缓存的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 #Javascript
vue 中几种传值方法(3种)
Nov 12 #Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 #Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 #Javascript
vue.js 实现a标签href里添加参数
Nov 12 #Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 #Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
实用函数4
2007/11/08 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
django静态文件加载的方法
2018/05/20 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python中函数参数匹配模型详解
2019/06/09 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python 制作本地应用搜索工具
2021/02/27 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
用Python写一个for循环的例子
2016/07/19 面试题
大学生秋游活动方案
2014/02/17 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书