最近在仿网易云,在歌曲详情页面,点击另一首音乐需要实现页面内容局部刷新的功能,所以vue如何刷新页面?vue如何刷新当前页面?vue刷新页面我总结几种方法:常见的有页面整体刷新,和局部刷新,一般实际工作中都是局部刷新,整体刷新的体验不好,网页会白屏一段时间,那么不废话,看看我整理的vue刷新当前页面的几种方式吧!

vue刷新当前页面的几种方式!-QUI-Notes

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

原理:子组件调用父页面的方法,实现局部刷新
实现方法网上有很多,就不粘贴复制了,我比较推荐方式二!

更多方法有待补充......