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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python交互式图形编程的实现
2019/07/25 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
图书借阅制度范本
2015/08/06 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技