精华内容
下载资源
问答
  • 博主之前在网上找了一大堆利用keep-alive来实现动态页面缓存的方法,但这些方法存在着各种bug,具体就不多说了,相信使用过keep-alive的人都踩过类似的坑。。。 话不多说,首先我要达到的效果是A—>B—>C每次...

    博主之前在网上找了一大堆利用keep-alive来实现动态页面缓存的方法,但这些方法存在着各种bug,具体就不多说了,相信使用过keep-alive的人都踩过类似的坑。。。

    话不多说,首先我要达到的效果是A—>B—>C每次都刷新页面,C—>B时缓存页面,但每次AB刷新B页面,BC刷新C页面

    现在我们就用include结合vuex来实现指定页面的缓存

    首先第一步*** 路由index.js*中

     		//A页面
            {
                path: '/A',
                name: 'A',//每个需要缓存的页面name必不可少
                component: resolve => require(['../components/aaa.vue'], resolve)
            },
            //B页面
            {
                path: '/B',
                name: 'B',
                component: resolve => require(['../components/bbb.vue'], resolve)
            },
            //C页面
            {
                path: '/C',
                name: 'C',
                component: resolve => require(['../components/ccc.vue'], resolve)
            },
    

    第二步,vuex里的store.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    var state = {
        keepAlive: [],
    }
    
    //mutations里面放的是方法,方法主要用于改变state里的数据
    
    var mutations = {
        SET_KEEP_ALIVE: (state, keepAlive) => {
            state.keepAlive = keepAlive
        },
    }
    
    //getters和组件的computed 类似,方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时,就可以使用 getters 来做
    
    var getters = {
    
        keepAlive: state => state.keepAlive
        
    }
    
    //vuex 实例化 Vuex.store
    
    const store = new Vuex.Store({
        state,
        mutations: mutations,
        getters: getters
    })
    
    //暴露
    export default store;
    
    
    

    第三步App.vue

    <template>
        <div id="app">
            <keep-alive :include="keepAlive">
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'App',
            data: function () {
                return {}
            },
            computed:{
                keepAlive(){
                    return this.$store.getters.keepAlive
                }
            }
        }
    </script>
    

    第四步,每次进入B页面时先初始化 keepAlive(设置要走缓存的页面),此次写在A页面

    <script>
        export default {
            name: 'A',
            methods: {
                buttonClick () {
                    this.$store.commit('SET_KEEP_ALIVE', ['B', 'C']) //可自行添加缓存组件的个数
              this.$router.push('/B') 
           } 
         } 
      }
    </script>
    

    第五步,在B页面中设置缓存和清除缓存

    <script>
    
        export default {
            name: 'B',
            beforeRouteEnter (to, from, next) {
                next(vm => {
                   if (from.path.indexOf('C') > -1) {
                        vm.$store.commit('SET_KEEP_ALIVE', ['B'])
                   }
                })
            },
            
            beforeRouteLeave (to, from, next) {
                if (to.path.indexOf('C') > -1) {
                   this.$store.commit('SET_KEEP_ALIVE', ['B', 'C'])
                } else if (to.path.indexOf('A') > -1) {
             this.$store.commit('SET_KEEP_ALIVE', []) 
                }
                next()
            }
     }
     
    </script>
    

    结束了,结束了,就这样结束了…,5分钟 。。。 好快。。。

    展开全文
  • 分块缓存技术能够有效提高动态网页的服务质量.现有的既存系统较少使用分块缓存技术设计,如何将其应用于这些系统是一个很大的挑战.本文提出了一种在线的动态网页分块缓存方法,使原系统演化成基于分块的系统,为用户...
  • 动态页面使用缓存:在页面上使用和并不使动态页面使用缓存,要在后台代码段Response.AddHeader("cache-control","max-age=时间(单位:秒)")或Response.Expires=时间(单位:分)来启用缓存。如果用Response.Add...
    1.静态的html页面想要设置使用缓存:<meta http-equiv="expires" content="utc时刻"/>,目前我只明确该方法可行。如果设置了<meta http-equiv="cache-control" content="max-age=时间"/>并不起缓存作用。 
    

      2.动态页面使用缓存:在页面上使用<meta http-equiv="expires" content="utc时刻"/>和<meta http-equiv="cache-control" content="max-age=时间"/>并不使动态页面使用缓存,要在后台代码段Response.AddHeader("cache-control","max-age=时间(单位:秒)")或Response.Expires=时间(单位:分)来启用缓存。如果用Response.AddHeader("expires","utc时刻")来设置Expires的话,cache-control的优先级比expires高,就是说如果设置了cache-control,那么expires设置的值就被覆盖掉。如果是用Response.Expires设置的话就不受这个约束。

      注意:动态页面的内容可能时时刻刻都在变化,所以一般不设定缓存,而是设定一个lastmodified时间和Etag来标识文件是否有更新,如果更新了就重新生成一个页面返回客户端,如果页面没有更新就返回304让浏览器访问cache里的网页。

    展开全文
  • Vue动态缓存页面

    2020-07-01 13:43:34
    需求说明:A页面到B页面需要缓存,A页面到C页面不需要缓存 所要缓存页面的顶级出口 <keep-alive :include="kpAlive"> <router-view/> </keep-alive> <script> export default { computed...

    原理通过keep-alive标签的include属性及vuex完成

    需求说明:A页面到B页面需要缓存,A页面到C页面不需要缓存

    所要缓存页面的顶级出口

    <keep-alive :include="kpAlive">
        <router-view/>
    </keep-alive>
    
    <script>
    export default {
        computed: {
            /**
    	      * router-alive
    	    */
            kpAlive() {
                return this.$store.getters.kpAliveRouter;
            }
        }
    }
    </script>
    

    store

    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    const store = new Vuex.Store({
          state: {
          	kpAliveRouter: []
          },
    	  mutations: {
    	  	//aliveRouter
            SET_KEEP_ALIVE: (state, keepAlive) => {
            	state.kpAliveRouter = keepAlive;
            },
    	  },
    	  getters: {
    	  	kpAliveRouter: state => state.kpAliveRouter
    	  }
    })
    export default store;
    

    所要缓存的页面A

    <script>
    const outAliveList = ['B']
    const currentName= "A"
    export default {
        name: "A",
        beforeRouteEnter(to, from, next) {
            next(vm => {
                //进入默认缓存,hack:刷新后第一次不会缓存
                vm.$store.commit("SET_KEEP_ALIVE", [currentName]);
            });
        },
        beforeRouteLeave(to, from, next) {
        	//所要跳转的页面是需要缓存的B则进行缓存
    		if (outAliveList.includes(to.name)) {
           		this.$store.commit("SET_KEEP_ALIVE", [currentName]);
            } else {
                this.$store.commit("SET_KEEP_ALIVE", []);
            }
            next();
    	},
    }    
    </script>
    

    tips:
    1.此处的A为页面中name的值,不为route的name
    2.如果没有达到缓存A页面效果,则需要检查A页面是否在二级(多级)的keep-alive中,如是则需要同时缓存这些层级页面

    展开全文
  • vue项目中为页面设置缓存,可以大大的节省性能,a页面跳转到b页面时,保留a页面的操作,b页面返回a页面时,a页面之前的操作不会发生改变,数据不会重复渲染。 vue页面缓存使用的是keep-alive,具体使用方法: ...

    多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)


             vue项目中为页面设置缓存,可以大大的节省性能,a页面跳转到b页面时,保留a页面的操作,b页面返回a页面时,a页面之前的操作不会发生改变,数据不会重复渲染。

             vue页面缓存使用的是keep-alive,具体使用方法:

             app.vue中:

    
    <keep-alive>
       <router-view v-if="$route.meta.keep_alive"></router-view>
    </keep-alive>
       <router-view v-if="!$route.meta.keep_alive"></router-view>
    
    

    需要缓存的组件内容直接在router中添加:

    
                    {
    			path: '/demo',
    			name: 'demo',
    			component: Demo,
    			meta: {
                                 keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
                            }
    		}
    
    
    

              缓存的基本用法就是这样,但是这样写柚子发现会有bug,因为具体的实际项目中是不会让一个页面一直在缓存状态的,这个时候就要用到include属性了,他可以实现动态让某个页面进行缓存或者取消缓存,下面说方法:

    首先还是app.vue页面

                
                            <keep-alive :include="includePageNames">
                                <!-- includePageNames是数组,用来存放需要缓存的页面的路由中的path或者name的 -->
    				<router-view class="router-view"></router-view>
    			</keep-alive>
    
    

    然后要在js中生命一下:

                data() {
    			return {
    				includePageNames: ['启动页_name'],//数组中默认放你项目的启动页面的name
    			}
    		},

    最后要通过监听路由的方法,动态往数组里面添加页面的name值:

    watch: {
    			'$route' (to, from) {
                    //判断数组中是否存在这个name,如果存在,则说明是返回的,要清除缓存
    				if(this.includePageNames.indexOf(to.name) == -1) {//不存在,添加缓存
    						this.includePageNames.push(to.name)
    					} else {//存在,清除缓存
    						this.includePageNames.pop()
    					}
    					
    				}
    			}
    		},
    
    
    //如果是一次回退n页的话,可以用splice方法,一次删除多个元素,也就是清除多个页面的缓存
    
    

    好了,到此实现vue页面的动态缓存已经实现了,如果还有其他问题的小伙伴可以继续回复我,我们可以互相讨论!!!

    希望能帮助到一些朋友!!!

     

    展开全文
  • 动态内容缓存

    千次阅读 2011-12-03 12:41:51
     这里所说的动态内容缓存是自行实现的缓存机制,包括整页缓存、局部缓存、数据缓存等。  缓存的目的是把花费昂贵开销的计算结果保存起来,以后需要的时候直接取出,避免重复的计算,一切缓存的本质都是如此。  ...
  • squid 强制缓存动态页面.docx
  • 本篇文章主要介绍了ThinkPHP实现静态缓存动态缓存示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • {片段缓存}: 片段缓存实现 if($this->beginCache('goods') ...'varyByParam'=>array('page'),-->根据不同的参数生成不同的缓存页面 'dependency'=>array( 'class'=>'CDbCacheDependency'---->数据库缓存
  • 片段缓存机制是加速动态网页分发的有效解决方案之一,但是实施片段缓存需要有效的共享片段检测机制。针对这种情况,提出一种高效的共享片段检测算法,并介绍了基于片段缓存动态网页传送模型。该模型能够自动识别...
  • 1,使用keep-alive标签 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>...2,router配置缓存页面开关 { // 模板列表 path: 'temp
  • Squid缓存动态页面 精确的缓存时间

    千次阅读 2009-01-09 16:30:00
    Squid缓存动态页面——精确的缓存时间本文针对squid 2.6.STABLE22本文作者:敖士伟 ikmb@163.com 一、动态页面本身动态页面输出两个必要要素:1、 Last-ModifiedLast-Modified的时间可以不用很在意,它不会对缓存...
  • OutputCache是针对所有访问服务器资源的用户,本篇要介绍的浏览器缓存则是针对单个用户,让浏览器在我们的控制下彻底不持续访问服务器上的动态内容,也就是我们要让浏览器变成我们的缓存机制中的一部分,在某些特定...
  • 1.静态的html页面想要设置使用缓存:<meta http-equiv="expires" content="utc时刻"/>,目前我只明确该方法可行。如果设置了<meta ...并不起缓存作用。 2.动态页面使用缓存:在页面上使用...
  • 主要介绍了Vue动态路由缓存不相互影响的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • thinkphp--静态缓存动态缓存

    千次阅读 2016-12-09 16:35:16
    1、静态缓存:生成静态页面--缓存整个页面。 2、动态缓存:仅对数据库中的数据进行了缓存,即“通过动态缓存,  不需要再读取数据库了,直接通过缓存文件来调取相应数据”,动态花村的实现方式“文件缓存”(默认...
  • VUE动态移除缓存实例

    千次阅读 2018-12-26 11:35:19
    keep-alive 默认不支持动态销毁已缓存的组件,所以此处给出的解决方案是通过直接操控 keep-alvie 组件里的 cahce 列表,暴力移除缓存: //使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现...
  • 实例:实现动态网页的静态缓存

    千次阅读 热门讨论 2015-03-02 12:56:29
    一行代码实现缓存的临时文件保存,四行代码实现缓存判断,三行代码实现临时文件调用
  • php动态缓存类.zip

    2019-07-11 11:06:47
    一个PHP缓存类,设置详细内容见代码里面,此版本为utf-8编码,如果网站采用其它编码请自行...动态缓存和静态缓存的根本差别在于其是自动的,用户访问页面过程就是生成缓存、浏览缓存、更新缓存的过程,无需人工操作干预。
  • iOS 取出网页缓存与网页离线缓存

    千次阅读 2016-11-01 11:44:33
    iOS 取出网页缓存与网页离线缓存
  • PHP4中最令人满意的事是——你可以让PHP缓存所有由脚本生成的输出,在你决定把它们送出之前,浏览器方是不会收到任何内容的
  • memcache动态缓存 和 静态页面 这三者是什么关系呢?分不清。 知道s函数和memcache是缓存数据,静态页面是生成静态页面。 可是都生 成静态页面 了为什么还要 s函数和memcache的缓存数据 呢?
  • 主要介绍了vue项目动态设置页面title及是否缓存页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 有时我们需要控制主页之类的网页过期时间.但我们比如使用的是Chinacache的CDN,那要怎么样设计才能让他缓存我的内容.
  • ehcache页面缓存技术

    2017-09-08 09:54:21
    ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache页面缓存技术ehcache...
  • 动态生成html缓存页面

    千次阅读 2013-11-10 19:43:17
    动态缓存访问的html页面,过滤器实现。 需求:例如买书网站,有成千上万本图书,用户可以点击图书的链接查看图书的详细信息,但如果每一次查看都要访问数据库的话,就会造成资源的极大浪费,为了节约我们有限的资源...
  • vue3 keep-alive 动态缓存页面

    千次阅读 2020-10-26 09:36:22
    通过keep-alive可以缓存页面,但是有的时候有这种需求: 从首页进入列表页要刷新 从详情页返回列表页不刷新 基本思路 通过vuex 保存需要缓存的列表页数组 通过keep-alive 的 include 来动态获取vuex保存的数组 代码...
  • 缓存技术asp页面缓存

    2011-08-18 09:55:12
    超级缓存技术缓存技术asp页面缓存缓存技术asp页面缓存

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 675,920
精华内容 270,368
关键字:

动态页面缓存