美文网首页
vue当路由参数变化时更新数据

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

作者: 北方蜘蛛 | 来源:发表于2017-03-26 10:53 被阅读4744次

在开发类似文章详细的功能时候,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":

 <div class='stock-contain' :view-id="newRender">

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

相关文章

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

    在开发类似文章详细的功能时候,url像是这样的 /article/1002,article是一个详细文章的组件,...

  • vue监听路由变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。 getDetail()方法...

  • Vue-- 监听路由变化,数据无法更新?

    Vue-- 监听路由变化,数据无法更新?

  • 18、 vue-router导航解析及钩子函数

    1、vue-router如何响应 路由参数 的变化? 问题:当使用路由参数时,例如从 /content?id=1 ...

  • 可实现响应式的数组操作(操作数组的方法)

    因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据的变化,视图会对应进行更新。 Vue中包含来一组观...

  • 对vue中nextTick()的理解及使用场景说明

    异步更新队列: 请记住:vue是依靠数据驱动视图更新的,该更新的过程是异步的。即:当侦听到你的数据发生变化时, V...

  • diff算法

    原文:详解vue的diff算法 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比...

  • 无标题文章

    详解vue的diff算法 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比...

  • vue面试题

    介绍一下Vue的响应式系统 Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对dat...

  • vue面试题解

    介绍一下Vue的响应式系统 Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对dat...

网友评论

      本文标题:vue当路由参数变化时更新数据

      本文链接:https://www.haomeiwen.com/subject/umohottx.html