vue内置组件keep-alive事件动态缓存实例


Posted in Javascript onOctober 30, 2020

在App.vue文件中配置

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

在路由中配置

{
    path: '/backstage',
    component: resolve => require(['@/views/backstage/my'], resolve),
    meta: { keepAlive: false }
  },
  {
    path: '/backstage/info',
    component: resolve => require(['@/views/backstage/my/info'], resolve),
    meta: { keepAlive: false }
  },

在页面中利用 beforeRouteLeave 动态处理

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 不缓存
    // to.meta.keepAlive = true; // 缓存
    next();
  }
};

补充知识:vue使用keep-alive后watch事件不销毁解决方案

使用了keep-alive动态缓存页面之后,有一些很难解决的问题:

每个页面里面设置的watch监听事件,如果监听了路由的变化或者vuex的变化,在切换页面的时候watch不会被销毁,导致下一个页面重复触发上一个watch监听的对象,重复请求接口。

解决方案:

定义一个全局 mixin.js

export const mixin = {
 data () {
  return {
   activatedFlag: false
  };
 },
 mounted () {
  this.activatedFlag = true;
 },
 activated () {
  this.activatedFlag = true;
 },
 deactivated () {
  this.activatedFlag = false;
 }
};

在使用keep-alive缓存的页面引入mixin

vue内置组件keep-alive事件动态缓存实例

防止在非当前页面重复触发keep-alive缓存页面的方法

vue内置组件keep-alive事件动态缓存实例

以上这篇vue内置组件keep-alive事件动态缓存实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
使用javascript插入样式
Mar 14 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
node+express制作爬虫教程
Nov 11 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 #Javascript
解决Vue-cli无法编译es6的问题
Oct 30 #Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
Vue自定义表单内容检查rules实例
Oct 30 #Javascript
探索node之事件循环的实现
Oct 30 #Javascript
使用TS来编写express服务器的方法步骤
Oct 29 #Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 #Javascript
You might like
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python实现决策树
2017/12/21 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
python中K-means算法基础知识点
2021/01/25 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
求职信的七个关键技巧
2014/02/05 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
怎样写辞职信
2015/02/27 职场文书
小学英语教师研修感悟
2015/11/18 职场文书