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

---

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

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