vue刷新当前页面的几种方式!
七娃博客681人阅读
最近在仿网易云,在歌曲详情页面,点击另一首音乐需要实现页面内容局部刷新的功能,所以vue如何刷新页面?vue如何刷新当前页面?vue刷新页面我总结几种方法:常见的有页面整体刷新,和局部刷新,一般实际工作中都是局部刷新,整体刷新的体验不好,网页会白屏一段时间,那么不废话,看看我整理的vue刷新当前页面的几种方式吧!
1.页面整体刷新方法有两种:
location. reload()
this.$router.go(0)
缺点很明显,就是整个页面整体刷新,重新加载数据了,实现了页面刷新;
2.不刷新页面,仅刷新数据!
不过还有一种方式,就是路由发生变化的时候,重新调用初始化加载数据的函数,原理:vue是数据双向绑定的,数据变了,页面内容就变了。
watch: { $route () { this.id = this.$route.params.id if (this.id) { this.init() } } },
缺点:调用加载数据的方法需要写在一个初始化函数里面;
优点:局部刷新,页面不刷新;
3.父页面provide,子组件inject
原理:子组件调用父页面的方法,实现局部刷新
实现方法网上有很多,就不粘贴复制了,我比较推荐方式二!
更多方法有待补充......
[…] 两个方式都能实现数据刷新,就看想要什么样的效果了!区别在这篇《vue刷新当前页面的几种方式!》 […]