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的一样就行;

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

Logo

前往低代码交流专区

更多推荐