如何快速刷新页面呢,往往我们会在router里面把代码会写的很复杂,其实可以不用对router进行改造,只要可以转跳到一个没有请求的页面,再返回回来,这样效果是一样的,代码如下
const reload = () => {
history.push('/login')
history.goBack()
}
但是这时候有两个问题
- 它会破坏浏览器自带的前进后退按钮的操作,也就是push遗留下来的东西, 这会导致用户迷惑。
- 虽然页面没重新加载,但是数据被置空了,再次请求需要时间,接口请求的时间往往在半秒之内,100、200ms左右,虽然很快,但是眼睛还是可以感觉到了刷新的一瞬间(这个是最关键的)
根据第二个问题,我们可以得出一个结论,再次渲染的时候不能有一个无数据的空白期,既然如此的话,要么数据请求特别快(在本地硬盘、内存等),要么之前的数据压根就不经行清空。 解决方法两个
- 数据请求特别快的问题,我写过一个基于Axios的请求控制频率的中间件点我查看, 这是一种办法
- 重新执行请求即可。
如下,请求统一到一个init函数里面
这个init就可以当作reload函数了,比如在子组件调用,就可以传过去调用。
这时候无缝更新,爽歪歪。这样第一个问题也解决了,因为压根就没操作路由。
(周末水一篇文章哈,勿怪)
-- 完 --