vue 路由参数变化,页面不更新的问题

时间:2023-03-08 23:20:48
vue 路由参数变化,页面不更新的问题

监控$route

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果。

举例:当前路由为  /pjthome?pjtid=123456

mounted: function () {
this.pjtid = this.$route.query.pjtid
this.pjtdetail()
},
在页面pjtdetail()方法中,需要用到pjtid这个参数,假如在同一页面有相似项目切换,只是pjtid发生变化,在切换时,并未重新加载数据,原因是跟vue的生命周期有关,具体该解决这个问题,添加路由监听即可。

exp:

watch: {
$route(){
this.pjtid = this.$route.query.pjtid
},
pjtid() {
this.pjtdetail()
},
}
解决。
---------------------
作者:酷酷小七
来源:****
原文:https://blog.****.net/weixin_37861326/article/details/80525720
版权声明:本文为博主原创文章,转载请附上博文链接!

如:

<script>
export default {
data() {
return {
isApp: true,
}
},
mounted() {
this.caseId = this.$route.query.caseId;
this.isApp = (this.$route.query.type == 'APP定制') ? true : false;
},
methods: {
getIsApp() {
this.isApp = (this.$route.query.type == 'APP定制') ? true : false;
}
},
watch: {
$route(){
this.isApp = this.$route.query.type;
},
isApp() {
this.getIsApp();
},
}
}
</script>