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 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
javascript版2048小游戏
Mar 18 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python复制文件代码实现
2013/12/23 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python list转矩阵的实例讲解
2018/08/04 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python sorted函数的小练习及解答
2019/09/18 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python有参函数使用代码实例
2020/01/06 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
初中地理教学反思
2014/01/11 职场文书
售后服务承诺函格式
2015/01/21 职场文书
主题班会开场白
2015/06/01 职场文书
新学期主题班会
2015/08/17 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技