Vue.js
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

vue项目刷新当前页面的三种方式(重载当前页面数据)

发布时间：2023-02-26 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue项目刷新当前页面的三种方式(重载当前页面数据)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue项目刷新当前页面的三种方式(重载当前页面数据)

一、this.$router.go(0)

相当于F5刷新，这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好

二、location.reload()

这种也是一样，画面一闪，体验不是很好，相当于页面刷新

推荐解决方法：

三、用provide / inject 组合

原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </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>

在需要用到刷新的页面。在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加…）,直接this.reload()调用，即可刷新当前页面。

注入reload方法

export default {
  inject: ['reload'],
 }

在需要重载的地方直接调用

this.reload()

PS:vue项目刷新当前页面的三种方法

1、最直接整个页面重新刷新。

location. reload();
this.$router.go(0);
// 这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好。

2、新建一个空白页面，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。这个方式，相比第一种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，也可采用。
3、provide / inject 刷新相对比较理想。

//首先在app.vue进行修改
<template>
    <div id="app">
      // 控制router-view的显示或隐藏，从而控制页面的再次加载
      <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
export default {
  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-button icon="el-icon-refresh" @click="refresh">点击刷新</el-button>
  </div>
</template>
<script>
export default {
//引用vue reload方法
  inject: ['reload'],
  name:"",
  data() {
	return {
	}
  },
methods: {
    refresh () {
      this.reload()
    }
  }
}
</script>

这样就实现了子组件调取reload方法就实现了刷新vue组件的功能,而且实现了组件跨越层级传递数据方法。

到此这篇关于vue项目刷新当前页面的三种方式(重载当前页面数据)的文章就介绍到这了,更多相关vue刷新当前页面内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的vue项目刷新当前页面的三种方式(重载当前页面数据)全部内容，希望文章能够帮你解决vue项目刷新当前页面的三种方式(重载当前页面数据)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的Vue.js相关文章
其他相关热搜词更多
微信小程序PythonPython3VueVue.jsC++C语言HTMLJava鸿蒙OS鸿蒙C语言标准库-微信小程序开发文档Python教程鸿蒙OS Ability微信小程序 模块化微信小程序 基础组件鸿蒙OS OperationExecuteException鸿蒙OS Uri鸿蒙OS DataObserver
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程