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

时间：2024-03-11 16:45:09

需求场景：点击导出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();

　　

新加的配置标记如下： 

 

 

应用：

 

 

　

 

相关文章