问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页、或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置。目前需求就是需要改成如下情况:

  问题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 class="app app_console" v-else-if="$route.fullPath != '/'">
<WHeader></WHeader>
<el-container class="forIE">
<WMenu></WMenu>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
<router-view v-else :key="activeQuery"></router-view>
</keep-alive>

<img class="material" src="./assets/commonImages/pattern.png" height="">
</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-alive,beforeRouteLeave,vuex,blank.vue

  1、vuex存一个keepAlive控制什么情况进入blank页面

  什么情况呢?(1)keepAlive为false;(2)需为那些需要缓存的页面,也就是加了meta.keepAlive为true的路由。否则没加的那些路由也都会走进blank页,影响结果。

<el-container class="app app_console" v-else-if="$route.fullPath != '/'">
<WHeader></WHeader>
<Blank v-if="!keepAlive && ['orderList'].includes($route.name)"></Blank>
<el-container v-else class="forIE">
<WMenu></WMenu>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
<router-view v-else :key="activeQuery"></router-view>
</keep-alive>
<img class="material" src="./assets/commonImages/pattern.png" height="">
</el-container>
</el-container>

  2、beforeRouteLeave的时候,如果调整其他菜单项,那么就给vuex的keepAlive置为false,让下次再进入order的时候,进入blank页面

  3、在blank页面进行处理:(1)修改当前order页面meta.keepAlive为true;(2)修改vuex的keepAlive为true,促使重新进入下面的缓存页面。

  这样就大功告成了。只是自己大致测了一下,优化暂未考虑。

vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求的更多相关文章

  1. 微信小程序页面列表与详情页跳转的正确姿势

    初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...

  2. vue列表到详情页的实现

    路由里边的 router/index.js path:'/detail/:id' 动态id 列表页渲染时: :to="'/detail/'+item.id" ===>id是指 ...

  3. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  4. django博客项目8:文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  5. vue实现淘宝商品详情页属性选择功能

    方法一是自己想出来的,方法二来自忘记哪里看到的了 不知道是不是你要的效果: 方法一:利用input[type="radio"] css代码: input { display: no ...

  6. ECSHOP 商品页详情页 添加同类随机商品

    1,根目录下找到goods.php文件 找到代码  $smarty->assign('properties',          $properties['pro']);             ...

  7. vue通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定 ...

  8. Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

  9. Freemarker商品详情页静态化服务调用处理

    --------------------------------------------------------------------------------------------- [版权申明: ...

随机推荐

  1. mybatis学习笔记(三)-- 优化数据库连接配置

    原来直接把数据库连接配置信息写在conf.xml配置中,如下 <?xml version="1.0" encoding="UTF-8"?> < ...

  2. group by 字符串合并 有关问题

    group by 字符串合并 有关问题 group by 字符串合并 问题 如下表: TYPE NAME C123 张三 C189 李四 C123 王一 C123 丁丁 C189 刘某 查询出如下形式 ...

  3. 使用 IntraWeb (25) - 基本控件之 TIWRegion

    这应该是 IW 中最重要的容器了, 和它同父的还有 TIWTabControl TIWRegion 所在单元及继承链: IWRegion.TIWRegion 主要成员: property Align: ...

  4. POJ 1741 Tree (树分治入门)

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 8554   Accepted: 2545 Description ...

  5. 安装node.js / npm / express / KMC

    http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html 1. 下载Node.js官方Windows版程序: http://nodej ...

  6. JTAG Simplified

    JTAG Simplified So the other day, I explored the JTAG bus interface which is frequently found in CPL ...

  7. [Go] 正则表达式 示例

    package main import "bytes" import "fmt" import "regexp" func main() { ...

  8. ArcEngine二次开发错误编码对照表(转)

    阅读数:3323 每当我们在进行AE开发,出现错误时经常会出现错误代码,但是我们并不知道它到底代表什么意思,这里的而错误编码我们可以对照着找到我们需要的时候常详细信息(问题是,经常还是会出现没有错误编 ...

  9. WordPress主题开发:style.css主题信息标记

    在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表 而且s ...

  10. hbase经常使用的shell命令样例

    1.hbase shell    进入hbase [hadoop@mdw ~]$ hbase shell HBase Shell; enter 'help<RETURN>' for lis ...