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>