问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页、或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置。目前需求就是需要改成如下情况:
问题1、列表 - 详情页,返回,不刷新重置;
问题2、再点其他菜单,再返回,需要刷新重置。
解决思路:
解决需求自然是想到vue的keep-alive去缓存组件,但是缓存组件有个不好的弊端,就是以后再进入页面也一直保持着上一次浏览的状态,那么如果我们有很多查询条件的情况,或者比如 route/:id 这种动态路由匹配的情况,那么页面就不会重新加载。
对于这个需求,组里人员意愿倾向于全部缓存页面,利用 keep-alive 的include、exclude属性去缓存需要缓存的页面;然后对于如果有特殊需要刷新页面的查询参数,比如动态路由的那种情况,就利用watch或activated去解决。个人认为这种解决方案既繁琐,又不易维护。
所以一直再想一个通用的方案。我一直的思路就是:
1、利用路由的meta信息增加:meta: {keepAlive: true}
2、利用路由的beforeRouteLeave,如果跳出去的页面是需要返回不刷新页面的路由(如详情、用户列表),那么就给当前路由meta.keepAlive = true,否则设为false
beforRouteLeave (to, from, next) {
if (['orderDetaiInfo'].includes(to.name)) {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
}
next()
}
3、然后在app.vue里面去控制
class ="app app_console" v-else-if="$route.fullPath != '/'">class="forIE"> class="material" src="./assets/commonImages/pattern.png" height="240">
当时想的也比较简单,需要缓存的时候就走的keepAlive为true的view,再回来就会缓存不刷新了。当跳至其他菜单后,其keepAlive就置为false了,那么再返回时就走的下面有key值刷新的view了。
问题完成一半,测试发现一个问题:
上面问题背景的1、2是可以很好的解决了,但是却出现第3个问题:
问题3:问题1、2之后再点击详情,再返回,却不是刚刚那个页面,而是之前缓存的页面。
原因:问题3的此时,该页面比如order页的meta的keepAlive此时是false的,那我在order当前页面进入的时候去改变为true,依然不会有效果,原因就是我们上面是形成了2个view,我们缓存的是上面那个view,就算改成true了,再返回时也是去的上面那个view,所以是返回之前缓存的页面,很惆怅。
解决方案其实也很简单,那么就是想法让从其他菜单,再进入当前order时,让进入的view变成keepAlive的就行了。
当时一直没想到一个好的方案,就只想到利用go(0),让页面重进一次,这样确实解决了问题3,但是体验不好。一度妥协去用watch,但是今天突然想到我可以利用一个blank空的页面去承接一下keepAlive的false的情况,相当于利用blank页面去达到go(0),让页面重进的目的,但是体验又不会刷新,由于是空页面,所以几乎看不出问题。
就写下简单方案:keep-alive,beforeRouteLeave,vuex,blank.vue
1、vuex存一个keepAlive控制什么情况进入blank页面
什么情况呢?(1)keepAlive为false;(2)需为那些需要缓存的页面,也就是加了meta.keepAlive为true的路由。否则没加的那些路由也都会走进blank页,影响结果。
class ="app app_console" v-else-if="$route.fullPath != '/'">else class="forIE"> if="$route.meta.keepAlive"> else :key="activeQuery"> class="material" src="./assets/commonImages/pattern.png" height="240">
2、beforeRouteLeave的时候,如果调整其他菜单项,那么就给vuex的keepAlive置为false,让下次再进入order的时候,进入blank页面
3、在blank页面进行处理:(1)修改当前order页面meta.keepAlive为true;(2)修改vuex的keepAlive为true,促使重新进入下面的缓存页面。
这样就大功告成了。只是自己大致测了一下,优化暂未考虑。