vue 页面缓存keep-alive 使用include动态实现页面缓存根据栈的推进和返回为页面设置缓存

绝地灬酷狼 2022-10-01 12:55 518阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- 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">
                                
    				<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页面的动态缓存已经实现了，如果还有其他问题的小伙伴可以继续回复我，我们可以互相讨论！！！

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