vue使用keepAlive保留页面历史状态,避免重复渲染。
首先记录一下本次使用keepalive组件实现的功能:从指定页面返回时保留上次浏览及选择状态。
首先在app.vue中
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="key" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="key" />
</div>
使用keepAlive组件将router-view包裹住,通过route.meta中的keepAlive来判断是否进行保留状态。那路由中想要保留状态的页面需要加上这个标识:
{
path:'/operMainNewleftdetail',
name:'运行中心-规格明细',
component: operMainNewleftdetail,
meta:{
keepAlive: true
}
但此时不管从任何路径进入此A页面都会保留上次的状态,而我这里=指向从B进入A是保留状态,其他页面进入A时重新渲染,那次是需要在A页面的vue文件中做路由判断:
beforeRouteLeave(to,from,next){
//当从A访问页面B时,此时A页面开启页面保存
if(to.path == '/B'){
if(!from.meta.keepAlive){
from.meta.keepAlive = true;
}
next();
}else{
//如果是进入其他页面则不保存,且摧毁页面再次进入需要渲染。
from.meta.keepAlive = false;
this.$destroy();
next();
}
}
还有比较重要的一点,我目前也不是很理解的一点,因为一般页面保存返回的时候就不会有mounted了,所以很可能造成A页面的子组件无值报错的情况:
这里建议加上actived:
**activated():**在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。
//页面的子组件靠mountd进行初始化的话
mounted() {
this.initData();
},
//进行页面数据的初始化,否则子组件可能因为没有数据会报错。
activated(){
this.initData();
}
最后页面的停留位置也是靠路由来判断,在main.js中进行就可以
router.beforeEach((to, from, next) => {
if(to.meta.keepAlive){
next();
}else{
window.scrollTo(0,0);//切换路由自动滚动到顶部
next();
}
});