vue刷新当前页面， vue如何刷新当前页面？不知道小伙伴们今天来看看边肖的分享吧！

Vue可以通过三种方式刷新当前页面：

Method 1: this. $router.go(0)

利用历史中前进后退的函数，传入0刷新当前页面。但是有一个问题就是页面在整个刷新过程中会出现空白，严重影响用户的体验，效果也不好。

this.$router.go(0)

方法二：location.reload()

使用直接刷新当前页面的方法。但是也有一个问题，整个刷新过程中页面会出现空白，严重影响用户体验，效果也不好。方法1的现象一直都有，不推荐。

location.reload()

方法3:提供/注入组合

允许一个祖先组件向它的所有后代注入一个依赖项，不管组件层次有多深，只要建立了上下游关系，它就会一直生效。

提供：选项应该是一个对象或返回对象的函数。该对象包含可以注入其子对象的属性。

Inject:一个字符串数组，或者一个对象，它的键是本地绑定名。

注意：提供和注入绑定没有响应。这是故意的。如果传入一个可以被监视的对象，其对象的属性仍然是有响应的。

基本使用步骤如下：

第一步：(App.vue)

通过$nextTick()，帮助实现。先移除router-view/再移除后再次添加刷新当前页面。是目前最适合的实现方式。

template

div id=app

router-view v-if=isRouterAlive/

/div

/template

script

export default {

name: App,

provide () {

return{

reload: this.reload

}

},

data() {

return {

isRouterAlive: true

}

},

methods:{

reload(){

this.isRouterAlive=false

this.$nextTick(function(){

this.isRouterAlive=true

})

}

}

}

/script

步骤二：(chapter.vue)

inject: [reload],

步骤三：(chapter.vue)

直接调用this.reload()刷新当前页面。

This.reload()//需要刷新页面。

vue刷新当前页面，以上就是本文为您收集整理的vue刷新当前页面最新内容，希望能帮到您！更多相关内容欢迎关注。