Vue页面如何~及时更新页面数据
Vue页面如何~及时更新页面数据前言:什么是Vue单页面正题:如何让单页面二次(后续)访问页面,数据渲染(更新)We need to be thinking about tomorrow. So we keep going.我思想明日,是故吾继。前言:什么是Vue单页面代码层面,可以将一个页面HTML、JS、CSS代码统一写在一个 .Vue文件里。页面展示:通过控制当前页面路径#号后面的路由名称,
·
Vue页面如何~及时更新页面数据
We need to be thinking about tomorrow. So we keep going.
我思想明日,是故吾继。
前言:什么是Vue单页面
- 代码层面,可以将一个页面HTML、JS、CSS代码统一写在一个 .Vue文件里。
- 页面展示:通过控制当前页面路径#号后面的路由名称,来达到控制(切换)不同页面的展示效果,请记住:这样显隐方式~页面不会重新请求api。
- 补充:(凡事有利也有弊)对于页面不需要二次刷新来说,不重新请求api,节约服务器资源,用户在界面上体验度好,但是,如果某个单页面需要二次加载(及时更新数据~比如:增删修改后),此时页面不会重新请求api!(为什么?在看一遍我前面的文字概述!)
反问:vue页面为什么~需要重新渲染页面数据?
- vue中,我们一般将请求方法,放在mounted( )中,但是只有第一次页面加载会触发mounted(),而后续是不会触发这个生命周期函数的!,若此时你做完增删修操作,数据怎么更新,怎么办?
正题:如何让单页面二次(后续)访问页面,数据渲染(更新)
- 使用页面的watch侦听事件,监控路由发生改变,则请求需要更新数据的方法(函数),如下图:这里更新数据的方法是querySalaryList()。
如图:1 和 2 前者,就是监听路由发生改变,就触发!导致其他页面也会受到影响,(我第一次使用时,用的就是1方式,导致我请求里的弹框,在跳转其他页面都出现,这是非常不好的!!!)怎么办,就使用 2 方式,当获取路由是特定路由,才触发事件…
更多推荐
已为社区贡献5条内容
所有评论(0)