第
vue项目刷新当前页面的三种方式(重载当前页面数据)
目录vue项目刷新当前页面的三种方式(重载当前页面数据)一、this.$router.go(0)二、location.reload()三、用provide/inject组合PS:vue项目刷新当前页面的三种方法
vue项目刷新当前页面的三种方式(重载当前页面数据)
一、this.$router.go(0)
相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好
二、location.reload()
这种也是一样，画面一闪，体验不是很好，相当于页面刷新
推荐解决方法：
三、用provide/inject组合
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。
template
divid=app
router-viewv-if=isRouterAlive/router-view
/div
/template
script
exportdefault{
name:App,
provide(){
return{
reload:this.reload
data(){
return{
isRouterAlive:true
methods:{
reload(){
this.isRouterAlive=false
this.$nextTick(function(){
this.isRouterAlive=true
/script
在需要用到刷新的页面。在页面注入App.vue组件提供（provide）的reload依赖，在逻辑完成之后（删除或添加）,直接this.reload()调用，即可刷新当前页面。
注入reload方法
exportdefault{
inject:[reload],
}
在需要重载的地方直接调用
this.reload()
PS:vue项目刷新当前页面的三种方法
1、最直接整个页面重新刷新。
location.reload();
this.$router.go(0);
//这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。
2、新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，也可采用。
3、provide/inject刷新相对比较理想。
//首先在app.vue进行修改
template
divid=app
//控制router-view的显示或隐藏，从而控制页面的再次加载
router-viewv-if=isRouterAlive/
/div
/template
script
exportdefault{
name:App,
provide(){
return{
reload:this.reload,
data(){
return{
isRouterAlive:true,
created(){},
methods:{
//通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
reload(){
this.isRouterAlive=false;
this.$nextTick(()={
this.isRouterAlive=true;
/script
在需要刷新的页面引入后直接调用即可
template
div
el-buttonicon=el-icon-refresh@click=refresh点击刷新/el-button
/div
/template
script
exportdefault{
//引用vuereload方法
inject:[reload],
name:,
data(){
return{