Vue项目实现页面刷新

前端 专栏收录该内容
11 篇文章 0 订阅

前言

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

经过

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

①先在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>

总结

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值