使用provice和inject结合的方法。此方法着实有效,不会有闪烁的空白出现。如下:
首先在App.vue组件里声明这个方法,写法如下:
<template>
<div id="app">
<!-- 价格判断,让显示隐藏 -->
<router-view v-if="IsRouterAlive" />
</div>
</template>
<style lang="scss"></style>
<script>
export default {
name: 'App',
// 相当于暴露reload这个方法,方便后面的组件调用
provide() {
return {
reload: this.reload,
};
},
data() {
return {
IsRouterAlive: true,
};
},
methods: {
// 重加载的方法
reload() {
this.IsRouterAlive = false;
this.$nextTick(() => {
this.IsRouterAlive = true;
});
},
},
};
</script>
然后在你想要刷新当前页面的页面组件调用这个方法:
export default {
name: 'xw-tabs',
//获取App.vue里写的重加载方法
inject:['reload'],
data() {
return {};
},
methods:{
fun(){
/*
router是路由实例,列如:var router = new Router
router.go(n)是路由的一个方法,意思是history
this.$router.go(0)
然后直接调用重新刷新的这个方法
*/
this.reload()
}
}
}