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()
},
}
解决。
---------------------
作者:酷酷小七
来源:CSDN
原文:https://blog.csdn.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>
原文地址:https://www.cnblogs.com/duanzhenzhen/p/10604675.html