vue 路由页面缓存

VUE框架真的很神奇，神奇到好多坑你都要填

这次说说VUE里缓存页面的问题

现在前端做APP的话，估计很少人会直接去用VUE cli来写，因为那样特别麻烦，你得配置很多东西。填很多坑！现在如果要求前端H5来做个APP，估计大家很多都会选择uniapp，MUI等这些主流框架，一套代码适配多端，很方便。

接下来就说说，vue cli做APP遇到的问题，页面缓存

因为总会要做到A-B，B选择完或者处理完业务返回到A，大家都知道，VUE默认是会销毁页面的，就是一般情况下，A->B页面，C回B页面后，A其实已经重新刷新渲染了，你之前填写的数据就会没了，但是我们需要的是我在A页面填写完东西，在不请求保存接口都时候我要留着数据在页面，还需要去B页面拿取一些数据返回A显示。这时候就要做到页面缓存了。

刚开始我用的仅仅是判断keep-alive

 <div id="app">
	<keep-alive>
		<router-view v-if='$route.meta.keepAlive' class="view"></router-view>
	</keep-alive>
	<router-view v-if='!$route.meta.keepAlive' class="view"></router-view>
</div>

然后再去缓存的页面判断

//路由守卫判断前进后退是否保存
beforeRouteLeave(to, from, next) {
	 if (to.path == "/B") {
		 from.meta.keepAlive = true;
	 }else{
		 from.meta.keepAlive = false;
	 }
	 next();
},

最后发现这样的方式虽然简单，但是容易出bug，就是我返回的时候其实他这个页面并没有清除缓存，当你再次进入缓存的B页面，再进入下一个C页面返回的时候，B页面就会把上一次的东西带出来了，相当于，把上一次的缓存拿过来了，这样的方式很不好，最后查阅资料，发现还是用vuex加include好用，并且没有什么bug，缓存点设置和清除都很好
下面是代码

//-------router.js----------

//在你配置路由的页面，设置好keepAlive和index

{
  path:'/A',
  name:'A',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
     index:1       //下标，标识
 },
 {
  path:'/B',
  name:'B',
  components:Book,
  meta:{
     keepAlive:false, //不需要被缓存的组件
     index:2		
 } 

	//----App.vue------
	//在app.vue里面，在keep-alive里加入include，可以看看vue官网keep-alive的说明文档
	<div id="app">
			<keep-alive :include="keepAlive">
			       <router-view class="view"></router-view>
			</keep-alive>
	</div>

	js部分加入
	computed: {
			keepAlive() {
				return this.$store.getters.keepAlive    //将页面存入vuex
			}
		},

//vuex里面加入keepalive相关


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		keepAlive: []
	},
	mutations: {
		setKeepAlive: (state, keepAlive) => {
			state.keepAlive = keepAlive
		}
	},
	getters: {
		keepAlive: state => state.keepAlive
	}
})

export default store

//main.js引入这个js文件

接下来就是处理缓存页面和清除缓存了

//在A页面用路由守卫处理
beforeRouteLeave(to, from, next) {
	if(to.name.indexOf('A') > -1) {
		this.$store.commit('setKeepAlive', [])   //清除缓存
	}else{
		this.$store.commit('setKeepAlive', ['B']);  //设置缓存
	}
	next()
},

这样就可以实现页面缓存的效果了，
如果有人不起作用，你一定要看看你缓存的那个页面，有没有加name=“B”，因为include认的是页面的name,必须保持一致

还有人可能想问，A->B->C，我想B缓存，B去C处理业务缓存B，B返回A清空缓存，怎么弄？
其实一样的，只需要在A页面的跳转B页面的方法里加上

//把B页面缓存起来
this.$store.commit('setKeepAlive', ['B']) 

然后缓存B的方法跟上面缓存A的一样就行；

如果有错误的地方，欢迎指正。