iview中同一页面不同tag页之间切换不能刷新的问题

针对IView框架中多Tab页详情展示不刷新的问题,本文介绍了一种通过监听路由变化实现页面局部刷新的解决方案,避免了全局刷新带来的加载延迟。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题场景:有一个界面,每条执行记录都可以点击查看详情。由于详情页面的布局,查询方法等都一样,所以将详情页面作为一个页面。

但由于点击不同记录的详情按钮,应该要有不同的详情展示。所以这个详情页面虽然是一个页面来的,但是应该是有多个tag页。

问题描述:上述场景,非常常见,但在iview中会认为这多个tag页是一个页面来的,所以导致打开多个“详情”页时,来回切换这些“详情”tag页,不会刷新,不管你在router里的“notCache”字段怎么配置,页面都是不刷新的……

解决方案:解决该问题的方法就是在你的详情页面,也就是你要跳转的多个tag页的页面配置中添加如下几行代码

watch: {    

    $route(to, from) {    //判断路由有没有变化

    this.$router.go(0);    //全局刷新

}},

就是通过watch监听路由值有没有发生变化

其实每个tag页都是保存了每次新传入的参数的,只不过多个tag页认为i是一个页面,而导致页面内容不会重新加载,自然也就不会刷新;

那么解决的方法就是监听判断路由值的变化,如果有变化,就全局刷新;完美解决!

但这样全局刷新会存在的问题就是刷新速度太慢,整个页面都要再加载一遍;

优化方案:监听到路由变化后,只获取传入的参数值,并通过参数值执行一遍查询,实现局部刷新

watch: {    

    $route(to, from) {    //判断路由有没有变化

    let mid = this.$route.query.id;    //从路由获取传入的id

    this.confirm(mid)    //执行该tag页面的查询方法

}},

confirm()方法是你自定义的查询方法,我的查询该页面的数据,展示出来;

亲测可行

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值