1.原生的js刷新方式:
location.reload();
2.vue自带的路由跳转方式:
this.$router.go(0);
使用过后发现这俩种方式都会使页面有短暂的空白,体验效果不是特别好所以总结出了第三种方式
3. 在app或者路由插槽处声明以下代码:
template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
//父组件中通过provide来提供变量,在子组件中通过inject接受。
return {
reload: this.reload
}
},
data() {
return{
//自定义参数
isShow: true
}
},
methods: {
reload () {
//reload方法首先将isShow设置为false,将router-view通过if判断取消
this.isShow= false;
// Vue.nextTick用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回promise对象。
this.$nextTick(function () {
// 在页面更新后再将isShow设置为true
this.isShow= true;
})
}
},
}
</script>
组件中设置刷新
export default {
inject:['reload'],// 此处引入在app中定义的reload方法
data () {
return {
}
}
},
在页面中需要页面刷新的地方调用即可
this.reload();