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 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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采集利器 Snoopy 试用心得
2011/07/03 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
对python的输出和输出格式详解
2018/12/08 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
struct和class的区别
2015/11/20 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
《胡杨》教学反思
2014/02/16 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
公司晚会主持词
2014/03/22 职场文书
采购意向书范本
2014/03/31 职场文书
职务说明书范文
2014/05/07 职场文书
英语课外活动总结
2014/08/27 职场文书
大学生作弊检讨书
2014/09/11 职场文书
薪资证明范本
2015/06/19 职场文书