vue当路由参数变化时更新数据

在开发类似文章详细的功能时候,url像是这样的 /article/1002,article是一个详细文章的组件,通常的做法是,在created里面执行methods的getDetail(id)的方法,来第一次读取数据,那这样在其他组件跳转过来,相当于重载组件,渲染数据是没问题的。当时有一个常见的场景,当你的文章详细内引用了相同文章的链接,或者是推荐阅读,由于使用了相同的组件,只是路由参数发生了变化,而数据并没有被更新。这是因为在当前组件内,created方法里面的getDetail只执行了一次,就不再执行了。为了解决这个问题,首先是想到了,计算属性computed,因为computed类似一个watcher,可以监听数据变化而执行响应的更新。代码像这样:

 computed: {
            newRender:function(){
            this.id = this.$route.params.id
            //获取上方数据列表
            this.getData(this.id);
            //获取tab研究数据
            this.getResearch(this.id);
            //设置默认tabview为研究
            this.tabView = 'research';
            this.getStockStatus(this.id);
            window.addEventListener('scroll', _.debounce(this.showGoTop, 500));
            return this.id
            }
        },
        created() {
            

        },

为了能让newRender方法能够被使用,在文档中我们会看到类似这样的{{newRender}},这样写更像是在显示一个数据,事实上也可以不显示数据。
那为了使这个写法没有违和感,我将他绑定在一个元素的属性上比如view-id="newRender":

 

到此可以从代码上很简洁的实现数据刷新,但是性能写法的科学性,还没有验证,本来以为这个事情,应该是vue-router可以预先处理的,但是并没有实现获或许也没有找到方法。

你可能感兴趣的:(vue当路由参数变化时更新数据)