关于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中的设置就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • 详解vue-router数据加载与缓存使用总结

    之前开发了一个单页面应用,按照深度,分为三层:目录页.一级子页(标签页.故事页等).二级子页(故事编辑页). 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据:回到上一级时,数据有更新.举个栗子,从故事页点击"编辑"按钮,进入故事编辑页则默认填充点击的"编辑"按钮所对应的故事数据:而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示. 对于这项需求,我们需要解决如下几个问题: 三层页面共享数据: 进入或退回当

  • Vue动态路由缓存不相互影响的解决办法

    关于react与vue中的key 之前在学习react的时候,常常遇到循环渲染组件时会提示需要在循环组件中加上key属性,比如有一组列表: import React, { Component } from 'react'; export default calss MainApp extends Component { state = { student: [ { name: 'Jenny', id: 'a001' }, { name: 'Jerry', id: 'a002' }, ] } re

  • vue 设置路由的登录权限的方法

    index.js 将需要登录权限的路由设置meta属性 meta:{requireAuth:true}, main.js 在main.js内直接写对路由的验证 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (sessionStorage.getItem("access_token")) {

  • vue二级路由设置方法

    项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是一样的,简单讲讲二级路由的配置吧. 首先把一级路由的结构准备好: <router-link to="/discover"> <div @click="clickFind('发现')"> <span class="icon-find"></span> <p>发现</p&g

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 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 &q

  • vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填写表单A页面跳转到B页面,然后再从B页面返回到A页面,实现A页面的所填的数据保留 一.设置路由缓存: 1.App.vue中加入<keep-alive> 具体代码如下: <template> <div id="app"> <!--<img sr

  • vue路由缓存的几种实现方式小结

    本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 vue 路由缓存的几种方式. 1.全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了 2.缓存单个指定路

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • Vue路由守卫及页面登录权限控制的设置方法(两种)

    ①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态: sessionStorage.setItem("flag", 1); ② 添加路由守卫 方法一: 直接在路由中添加 const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... }) 方法二:当我们使用的是export default 方法时可以在main.js中添加 router.b

  • vue-cli3在main.js中console.log()会报错的解决

    vue-cli3在main.js中console.log()会报错的解决

    目录 在main.js中console.log()报错 问题重新 console.log()输出没效果问题 第一种 第二种 在main.js中console.log()报错 问题重新 在main.js使用console.log()会报错 这个错误是Vuejs - 使用ESLint检查代码质量是进行提示的,所以修改成window.console.log()就能避免这个报错 console.log()输出没效果问题 在平时和的开发中我们经常遇到console.log()没有效果,作为小白的我已经遇见

  • JS中如何设置readOnly的值

    在网页中我们有时候需要控制文本输入框的"输入状态",一些关键属性是不能修改的,这个时候需要将文本输入框的readonly属性设置为False,在网页中我们可以使用 <input name="txt_name" type="text" readonly="readonly" id="txt_Status" name="txt_name" style="width:150px

  • 详解Vue路由History mode模式中页面无法渲染的原因及解决

    详解Vue路由History mode模式中页面无法渲染的原因及解决

    Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务

  • vue路由--网站导航功能详解

    1.首先需要按照Vue router支持 npm install vue-router 然后需要在项目中引入: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 2.定义router的js文件 import Vue from 'vue' import Router from 'vue-router' import User from '../pages/user' import Home fro

  • Vue路由模块化配置的完整步骤

    Vue路由模块化配置的完整步骤

    前言 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout

随机推荐