vue页面进行缓存
问题: 一共是三个页面 ,、列表页A(固定参数)、列表内容页B(列表id)、内容详情页C (内容id) A-B-C可以正常进行, C-B id参数不知道怎么传,于是利用了 对B页面进行缓存。
解:1、 定义要缓存的组件 在router.js中对组件进行添加
meta: {
keepAlive: true, //是否被缓存
isUseCache: false, //是否进行刷新 (判读是否要缓存)
}
2、在根组件中对要缓存的组件进行 包裹
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 page1-->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如,page2 , page3 -->
</keep-alive>
3、在要缓存的页面B写上activated 监听该页面是否要进行刷新
activated() {
if(!this.$route.meta.isUseCache){ //isUseCache 时添加中router中的元信息,判读是否要缓存
this.dataList = [];
this.fromData.situationId = this.$route.params.situationId;
this.getList();
}
},
4、在C页面 (为了回到C页面不执行B页面的activated() 从而行缓存)
beforeRouteLeave(to, from, next){
// 列表页面跳转到 详情页时,设置需要缓存
if(to.name=='myWorkQkhzCksb'){
to.meta.isUseCache = true
}
next()
},
5、在A页面(为了A页面到B页面的 执行activated() 不进行缓存)
beforeRouteLeave(to, from, next){
// 列表页面跳转到 详情页时,设置需要缓存
if(to.name=='myWorkQkhzCksb'){
to.meta.isUseCache = false
}
next()
},
总结可能可以描述,表达方式不太准确,纯记录这个新功能 路由太深的东西还不太明白 继续学习