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

 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)
                })
            },

　　　　... ...