Vue项目实现页面刷新

前言

最近在做前端项目的时候，需要对页面进行刷新，在当时这个问题对于自己来说还算是比较难的，后来经过了一系列的研究之后，终于解决了这个问题，今天来记录一下！

经过

provice和inject结合的方法，解决页面刷新有很多的方法，相比之下，这种方法的体验更加的好，所以就只介绍这一种方案。

①先在App.vue组件里声明以下方法，如：

<template>
	<div id="app">
		<router-view v-if="IsRouterAlive"/>
	</div>
</template>

<script>
export default{
	name:'App',
	provide(){
		return{
			reload:this.reloda
		}
	},
	data(){
		return{
			style:'',
			IsRouterAlive:true
		}
	},
	methods:{
		reload(){
			this.IsRouterAlive=false;
			this.$nextTick(function(){
				this.IsRouterAlive=true;
			})
		}
	}
}
</script>

②在你想要刷新的页面的组件调用这个方法即可：

<script>
	export default{
		name: "Header",
		inject:['reload']
	},
	methods:{
		flushCom:function(){
		this.reload();
		}
	}
</script>

总结

静下心来，踏踏实实，就可以解决一些自己认为不容易、不简单的事儿，心态决定一切，态度很重要，经过了这一次的学习，又掌握了一点知识，很好，在此和大家分享一下，也希望大家能在下方留言，多多交流！