这篇文章将为大家详细讲解有关Vue如何实现前进刷新后退不刷新的效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>需求一:
在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。
解决方案在app.vue设置:
假设列表页为列表。vue,详情页为细节。vue,这两个都是子组件。
我们在维生添加列表页的名字,缓存列表页。
然后在列表页的创建函数里添加ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。
这样就可以解决问题了。
<强>需求二:
在需求一的基础上,再加一个要求:
可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。
我们可以在路由配置文件上对细节。vue增加一个元属性。
这个元属性,可以在详情页中通过route.meta美元。isRefresh来读取和设置。设置完这个属性,还要在App.vue文件里设置一看下美元路线属性。
这样就不需要在列表页的创建函数里用ajax来请求数据了,统一放在App.vue里来处理。
触发请求数据有两个条件:
从其他页面(除了详情页)进来列表时,需要请求数据。
<李>从详情页返回到列表页时,如果详情页元属性中的isRefresh为真,也需求重新请求数据。
当我们在详情页中删除了对应的列表项时,就可以将详情页元属性中的isRefresh设为真的。这时再返回到列表页,页面会重新刷新。
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
关于“vue如何实现前进刷新后退不刷新的效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
