关于vue路由缓存清除在main.js中的设置

 更新时间:2019年11月06日 08:41:36   作者:高级前端工程师Vue方向  
今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1.main.js

/* 页面数据缓存 */
var _CACHE_OBJS = {};
 
function _init_cache(comp, key, cache) {
 var obj = cache[key];
 if (obj !== undefined) {
 comp[key] = obj;
 }
 var deep = typeof comp[key] === 'object';
 comp.$watch(key,
 function (val) {
  //console.log("page " + key + " updated");
  cache[key] = val;
 }, {
  deep: deep
 });
}
 
 
var _PAGE_CACHE = {
 /*
 * 初始化页面缓存数据
 * comp: 当前页面component 对象
 * path: 当前页面vue router path
 * data: 需要缓存的数据对象名称,或名称数组
 */
 cache: function (comp, path, data) {
 if (data == '' || data == undefined || data == null) {
  data = restore(comp._data);
 }
 var cache = _CACHE_OBJS[path];
 if (cache === undefined) {
  cache = {};
  _CACHE_OBJS[path] = cache;
 }
 if (typeof data == 'string') {
  _init_cache(comp, data, cache);
 } else {
  var i;
  for (i = 0; i < data.length; ++i) {
  _init_cache(comp, data[i], cache);
  }
 }
 console.log(_CACHE_OBJS, "页面数据缓存");
 },
 
 /* 清除页面缓存 */
 clear: function (path) {
 delete _CACHE_OBJS[path];
 },
 
 /* 清空所有缓存数据 */
 reset: function () {
 //console.log("reset page cache");
 _CACHE_OBJS = {};
 },
 /*根据path查看当前页面缓存是否存在*/
 has_cache: function (path) {
 return _CACHE_OBJS[path] !== undefined && !isEmptyObject(_CACHE_OBJS[path]);
 }
};
 
Vue.prototype.$cache = _PAGE_CACHE;
/* eslint-disable no-new */
 
var restore = function (vueObject) {
 var result = [];
 for (var index in vueObject) {
 result.push(index);
 }
 return result;
};
 
var isEmptyObject = function (obj) {
 for (var key in obj) {
 return false;
 }
 return true;
}
 

以上这篇关于vue路由缓存清除在main.js中的设置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现图片按比例缩放问题操作

    vue实现图片按比例缩放问题操作

    这篇文章主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue项目API接口get请求传递参数方式

    vue项目API接口get请求传递参数方式

    这篇文章主要介绍了vue项目API接口get请求传递参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 栽Vue3中传递路由参数的三种方式

    栽Vue3中传递路由参数的三种方式

    vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,传参方式可划分为 params 传参和 query 传参,本文将给大家介绍如何通过不同方式在 Vue 3 中传递路由参数,需要的朋友可以参考下
    2024-07-07
  • Vue3+vuedraggable实现动态配置页面

    Vue3+vuedraggable实现动态配置页面

    这篇文章主要为大家详细介绍了Vue3如何利用vuedraggable实现动态配置页面,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2023-12-12
  • Vue axios与Go Frame后端框架的Options请求跨域问题详解

    Vue axios与Go Frame后端框架的Options请求跨域问题详解

    这篇文章主要介绍了Vue axios与Go Frame后端框架的Options请求跨域问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue发送ajax请求方法介绍

    Vue发送ajax请求方法介绍

    这篇文章介绍了Vue发送ajax请求的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • 简单聊聊Vue中的ref,toRef与toRefs

    简单聊聊Vue中的ref,toRef与toRefs

    这篇文章主要是想和大家来简单聊聊Vue中的ref、toRef、toRefs这三个函数的使用与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-04-04
  • vue组件之间通信方式实例总结【8种方式】

    vue组件之间通信方式实例总结【8种方式】

    这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • Vue使用枚举类型实现HTML下拉框步骤详解

    Vue使用枚举类型实现HTML下拉框步骤详解

    本文分步骤给大家介绍了Vue使用枚举类型实现HTML下拉框的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 关于vue的语法规则检测报错问题的解决

    关于vue的语法规则检测报错问题的解决

    在配置路有的时候,陆续出现了各种报错其中最多的是一些写法,例如空格,缩进,各种括号,这篇文章主要介绍了关于vue的语法规则检测报错问题的解决,非常具有实用价值,需要的朋友可以参考下
    2018-05-05

最新评论