Vue. 之 刷新当前页面，重载页面数据

Posted 2022-06-12 charles-yuan

 Vue. 之 刷新当前页面，重载页面数据

 

如下截图，点击左侧不同的数据，右侧根据左侧的KEY动态加载数据。由于右侧是同一个页面，在进行路由跳转后，不会再次刷新数据。

 

　　解决方案:

　　　　右侧的页面中 script代码块添加：watch模块，如下代码：

　　　　 
　　　　　... ...

　　　　　mounted : function() 
            this.loadData();
        ,
        watch: 
            //监听相同路由下参数变化的时候，从而实现异步刷新
            ‘$route‘(to,from) 
                this.loadData();
            ,
        , 
        methods: 
            loadData() 
                let varCode = this.$route.query.varCode;
                this.api.service
                .gets(
                    varCode: varCode
                )
                .then(res => 
                    console.log(res)
                )
            ,

　　　　... ...