使用this.$router.repalce()/this.$router.push()/this.$router.go(n)跳转列表页,页面无刷新解决方法
·
前言
前两天做了个新增页面(之前都是用弹窗实现新增数据功能,现在使用路由跳转新增界面),但是出现一个问题,我新增内容通过接口,新增成功并返回列表页,但是列表页页面没有刷新(因此:在跳转相同组件不会触发vue的视图更新。)
尝试方法一(不可行)
使用一个中间页面作为媒介,(原本由A(新增页)页面跳转B(列表页)页面,现在加个C(媒介页)页面,新的跳转是由A到C再到B)发现这样并不能使页面刷新,因为首先看到的是列表页,点击A中的新增按钮显示B,点击B返回A时,路由里面应该是由路由history记录,发现路由没变化也就不会更新A视图。
尝试方法二(可行)
在列表页使用watch监听
watch: {
$route(to, from) {
console.log(to, "to");//to是去往别的页面的
console.log(from, "from");//from是从别的页面过来的
if (from.path === "/contract/contract-edit") { //相当于在新增页点击返回按钮时,才刷新列表页
this.getlist();
}
},
},```
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)