vue 刷新当前页面或者跳转页面时候刷新

需求场景:点击导出excel按钮,调用导出接口,接口调用成功跳转下载文件列表,进行文件下载,这里遇到的问题就是跳转到文件列表的时候,刚刚导出的文件还没有生成,需要刷新浏览器,当时解决方法用的 window.location.reload();效果不理想,

1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的 
2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好

 

解决方法

比较终极解决办法, 页面闪烁是不存在的, 几乎没有啥毛病。 
provide /inject 组合

作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效。

App.vue 文件中 修改文件 整个配置如此:

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

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

 

在页面中应用:

inject: ['reload'],



this.reload();

  

新加的配置标记如下: 

 

 

应用:

 

 

 

 

posted @ 2019-10-15 10:55  小蓉儿  阅读(1230)  评论(0编辑  收藏  举报