DDR爱好者之家

vue.js刷新当前页面的实例讲解
站长资源 2025/10/25 佚名
2 1538
DDR爱好者之家 Design By 杰米

在我们修改过页面的某些数据后，通过想要把页面刷新一下，看看修改后的结果。由于vue的存在，页面是不会自动刷新的，需要我们手动进行操作。在vue里有三种刷新方法，最推荐的就是组合控制法，另外另种方法也会分享给大家学习，下面我们一起来看看vue如何刷新页面吧。

1.强制刷新

window.location.reload()

原生 js 提供的方法；

this.$router.go(0)，vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。

2.伪造刷新

通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来

// index.vue 首页
this.$router.replace('/empty')
// empty.vue 空白页
created() {
  this.$router.replace('/')
}

3.使用provide / inject组合控制的显示

vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。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>

注入依赖：

export default {
 inject:['reload'], //注入依赖
 name: "CompanyConfigure",
 data() {
  return {... ...

调用：

this.reload();
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米