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

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

Petter’s Blog

已于 2022-04-08 14:44:14 修改

1798
收藏 1
分类专栏： 前端 技术交流 文章标签： iview tag页 页面刷新 页面切换
版权

前端
同时被 2 个专栏收录
1 篇文章0 订阅
订阅专栏

技术交流
8 篇文章0 订阅
订阅专栏
问题场景：有一个界面，每条执行记录都可以点击查看详情。由于详情页面的布局，查询方法等都一样，所以将详情页面作为一个页面。

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

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

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

watch: {

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

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

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

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

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

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

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

watch: {

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

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

this.confirm(mid)    //执行该tag页面的查询方法
1
2
3
4
5

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

亲测可行
————————————————
版权声明：本文为CSDN博主「Petter’s Blog」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/A_captain_608/article/details/103807289