vue刷新当前页面

vue如何刷新现阶段页面呢？不清楚的小伙伴们一起来看看我现在的分享!

vue刷新现阶段页面有三种方式：

方法一：this.$router.go(0)

利用history 中向前和倒退的作用，传到 0 刷新现阶段页面。可是有一个问题便是页面全部刷新全过程中会黑屏，严重影响消费者的体验感，实际效果不太好。

this.$router.go(0)

方式二：location.reload()

利用立即应用刷新现阶段页面的方式。可是一样存有有一个问题便是页面全部刷新全过程中会黑屏，严重影响消费者的体验感，实际效果也是不太好，和方式一的情况一直，都不强烈推荐应用。

location.reload()

方式三：provide / inject组成

容许一个先祖部件向其全部后代子孙引入一个依靠，无论部件层级多深，并在起上中下游关联建立的时间段里自始至终起效。

provide：选择项应该是一个对象或回到一个对象的函数公式。该对象包括可引入其子孙后代的属性。

inject：一个字符串数组，或一个对象，对象的 key 是当地的关联名。

留意：provide和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()// 必须刷新页面

以上便是我现在的共享了，期待可以作用到大伙儿。

- END -