Vue页面刷新的三种方式

vue页面刷新的三种方式

由于功能需求，需要离开页面前告知用户是否需要丢弃未保存的数据，这时候切换的菜单会失效，但是菜单依然会高亮错误。所以要进行一次页面刷新。

方法一

原地页面刷新

this.$router.go(0) 
或者
location.reload()

上面的方法都是可以进行刷新但是屏幕都会闪白一下，体验极差

方法二

跳转空白页再跳回原页面
新建一个空白页面empty.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。

在需要刷新的页面添加路由跳转：

this.$router.replace({ path:'/empty' })

这里也会存在闪白的问题。

方法三

使用inject / provide组合控制显示
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

1. App.vue中定义变量 ，router-view按照变量显示。

 <router-view v-if="isRouterAlive">


	provide(){
		reload:this.reload
	},
	method:{
		reload(){
			this.isRouterAlive = false
			this.$nextTick(()=>{
				this.isRouterAlive = true
		   })
	     }
	}

需要刷新的页面引入

inject:['reload']
执行时则使用
this.reload()

执行reload 即可达到页面刷新的效果。
这里可以配合路由钩子函数离开时操作根据数据判断是否离开。
使用reload方法时刷新页面可能会使作用域中的其他代码不会执行，所以尽量单独使用reload方法，或将其他全局的代码放在reload方法中一起调用。