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

默认分类 2019-05-03 04:10 暂无评论

最近这一年都在用 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()) 就可以解决初始化的问题了。然后,再去请求数据

暂无评论