Vue.js 路由参数发生变化时使用 Object.assign 初始化 data

栏目: JavaScript · 发布时间: 6年前

内容简介:最近这一年都在用场景如下:当前 URL:http://localhost:8080/news?id=1&page=1

最近这一年都在用 Vue.js 做项目,有时候路由参数发生改变时页面不会重载,导致数据都是旧的。

场景如下:

当前 URL:http://localhost:8080/news?id=1&page=1

发生变化:http://localhost:8080/news?id=1&page=2

这个时候 page 参数改变了,但是页面内容没有发生改变,这时候一般需要用到 beforeRouterUpdate 可以 参考文档 来重新请求一遍数据就可以了。

但是,如果我们有一些变量,如打开关闭对话框。处于打开状态,但是我翻页时并没有关闭对话框。这个时候翻页对话框也存在,并且对话框调用的数据是上一页的,这个时候我们翻页前需要关闭对话框,在 beforeRouterUpdate 可以进行修改。

但是如果页面复杂的时候,有大量变量要初始化的话,那么 beforeRouterUpdate 一大堆变量赋值,又臭又长难看,这个时候只需要用 Object.assign(this.$data, this.$options.data()) 就可以解决初始化的问题了。然后,再去请求数据


以上所述就是小编给大家介绍的《Vue.js 路由参数发生变化时使用 Object.assign 初始化 data》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷钢铁侠

硅谷钢铁侠

[美] 阿什利·万斯 / 周恒星 / 中信出版集团 / 2016-4 / 68.00元

◎全球首部埃隆•马斯克授权著作!了解埃隆•马斯克最全面、最真实、最经典读本 ◎创业者必读。首次披露马斯克如何建立和运营PayPal、特斯拉、Space X、Solar City等公司的细节。 ◎创新者必读。关于科技、梦想、创业、工作、团队、人生。马斯克首次公开创新的秘密。 ◎故事迷必读。硅谷最优秀科技作家阿什利•万斯历时将近4年,遍访300余人,写就记录马斯克传奇人生的经典著作。......一起来看看 《硅谷钢铁侠》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具