问题场景:有一个界面,每条执行记录都可以点击查看详情。由于详情页面的布局,查询方法等都一样,所以将详情页面作为一个页面。
但由于点击不同记录的详情按钮,应该要有不同的详情展示。所以这个详情页面虽然是一个页面来的,但是应该是有多个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()方法是你自定义的查询方法,我的查询该页面的数据,展示出来;
亲测可行