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弹出层插件简化版代码下载
Oct 16 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
js实现tab栏切换效果
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/03/27 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
关于php循环跳出的问题
2013/07/01 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php防止sql注入的方法详解
2017/02/20 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python简易远程控制单线程版
2018/06/20 Python
python 中如何获取列表的索引
2019/07/02 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
销售找工作求职信
2013/12/20 职场文书
会议接待欢迎词
2014/01/12 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers
MySQL 数据库范式化设计理论
2022/04/22 MySQL