Vue刷新当前页面几种方式

全栈程序员-站长 • 2022年10月16日下午9:00 • 未分类 • 阅读 0

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

问题:

最近些日子项目中突然碰到了一个需求，再完成编辑操作之后需要进行页面刷新，通过实验有如下几种姿势可以解决需求中的问题，下面进行简单总结如下。

姿势一：this.$router.go(0)
这个姿势是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果不好。

this.$router.go(0)

姿势二：location.reload()

这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果也是不好，和姿势一的现象一直，也不推荐使用。

location.reload()

姿势三：provide / inject组合(推荐使用)

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名。
注意：provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

基本使用步骤如下：

步骤一：（App.vue）
通过 $nextTick()，协助实现。先把移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式。

<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>