临淄网站建设yx718,wordpress连接丢失,19年做网站还能赚钱,推荐盐城网站建设问题背景#xff1a;有时候一些列表会有一些跳转的需求#xff0c;比如跳到详情页、或者是其他相关的页面#xff08;比如跳到用户列表去查看用户的相关信息#xff09;等#xff0c;此时再返回列表页#xff0c;列表页会刷新重置。目前需求就是需要改成如下情况#xf… 问题背景有时候一些列表会有一些跳转的需求比如跳到详情页、或者是其他相关的页面比如跳到用户列表去查看用户的相关信息等此时再返回列表页列表页会刷新重置。目前需求就是需要改成如下情况 问题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里面去控制 el-container classapp app_console v-else-if$route.fullPath ! /WHeader/WHeaderel-container classforIEWMenu/WMenukeep-aliverouter-view v-if$route.meta.keepAlive/router-viewrouter-view v-else :keyactiveQuery/router-view/keep-aliveimg classmaterial src./assets/commonImages/pattern.png height240/el-container/el-container 当时想的也比较简单需要缓存的时候就走的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-alivebeforeRouteLeavevuexblank.vue 1、vuex存一个keepAlive控制什么情况进入blank页面 什么情况呢1keepAlive为false2需为那些需要缓存的页面也就是加了meta.keepAlive为true的路由。否则没加的那些路由也都会走进blank页影响结果。 el-container classapp app_console v-else-if$route.fullPath ! /WHeader/WHeaderBlank v-if!keepAlive [orderList].includes($route.name)/Blankel-container v-else classforIEWMenu/WMenukeep-aliverouter-view v-if$route.meta.keepAlive/router-viewrouter-view v-else :keyactiveQuery/router-view/keep-aliveimg classmaterial src./assets/commonImages/pattern.png height240/el-container/el-container 2、beforeRouteLeave的时候如果调整其他菜单项那么就给vuex的keepAlive置为false让下次再进入order的时候进入blank页面 3、在blank页面进行处理1修改当前order页面meta.keepAlive为true2修改vuex的keepAlive为true促使重新进入下面的缓存页面。 这样就大功告成了。只是自己大致测了一下优化暂未考虑。 转载于:https://www.cnblogs.com/goloving/p/10445624.html
