Vue.js 组件如何监听并且刷新当前页面
2017-11-09| 程成| 2984| 2| Vue.js

自己最近用了一套vuejs的框架,并且调用了接口访问后台。但是遇到一个问题,就是第二次访问同一个页面时候,如果没有执行接口方法,数据会“暂存”,无法实现点击更新页面效果。


后来,用如下方法解决了这个问题,可以实现页面切换时,实时更新页面数据:


watch: {
    //监听分页
    page: function () {
    console.log(this.page + ' change');
    this.getList();
},
    limit: function () {
        console.log(this.limit + ' change');
        this.getList();
    },
    "$route": function(route){
        this.performance.bid = route.params.bid;
        this.getList();
    }
}


通过这个方法,这样就可以实现页面点击后可以自动刷新页面了。不过这个方法考验接口速度,如果接口访问时间很长,页面就会卡着一段时间,如果大家有什么好的方法,可以给我留言!



2017-11-16更新


这个方法有个弊端,就是每次进页面后才会调用接口,刷新数据。我们希望在页面渲染出来之前请求接口,展示数据。

如果你用了“iview-admin-dev”这个框架后,其中一个有效的解决方法是给这个页面添加一个独一无二的name属性,如下图:


image.png



这样就会在每次进入页面的时候,都会重新请求接口,刷新数据。

具体为什么有这个name,就能够生效,我也还没研究透彻。


看了下官网,给出的解释是:

1、允许组件模板递归地调用自身

2、另一个好处是便于调试


有知道原因的大神可以给我留言(暂时还没有)或者直接发我qq!谢谢了。





×
作者:程成
QQ:492245711