vue.js刷新当前页面的实例讲解

更新时间：2020年12月29日 15:15:25 作者：小妮浅浅

在本篇文章里小编给各位分享了一篇关于vue.js刷新当前页面的实例讲解，有兴趣的朋友们可以学习参考下。

在我们修改过页面的某些数据后，通过想要把页面刷新一下，看看修改后的结果。由于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();

到此这篇关于vue.js刷新当前页面的实例讲解的文章就介绍到这了,更多相关vue.js刷新当前页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Python语言实现SIFT算法
SIFT，即尺度不变特征变换，是用于图像处理领域的一种描述，本文重点给大家介绍Python语言实现SIFT算法，感兴趣的朋友一起看看吧
2021-11-11
Tensorflow2.10使用BERT从文本中抽取答案实现详解
这篇文章主要为大家介绍了Tensorflow2.10使用BERT从文本中抽取答案实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Python 如何调试程序崩溃错误
这篇文章主要介绍了Python 如何调试程序崩溃错误，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08
Python爬虫使用bs4方法实现数据解析
这篇文章主要介绍了Python爬虫使用bs4方法实现数据解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
这篇文章主要介绍了python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法,需要的朋友可以参考下
2019-10-10
python迭代器的使用方法实例
这篇文章主要介绍了python迭代器的使用方法,代码很简单，大家可以参考使用
2013-11-11
python tornado上传文件功能实现(前端和后端)
Tornado 是一个功能强大的 Web 框架,除了基本的请求处理能力之外,还提供了一些高级功能,在 Tornado web 框架中,上传图片通常涉及创建一个表单,让用户选择文件并上传,本文介绍tornado上传文件功能,感兴趣的朋友一起看看吧
2024-03-03
Python绘制数据动态图的方法详解
这篇文章主要为大家详细介绍了如何利用Python语言绘制好看的数据动态图，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下
2022-07-07
python常用的时间模块之datetime模块示例详解
这篇文章主要介绍了python常用的时间模块之datetime模块,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
Python 装饰器代码解析
装饰器(Decorators)是 Python 的一个重要部分。简单地说：他们是修改其他函数的功能的函数。他们有助于让我们的代码更简短，也更Pythonic（Python范儿）。大多数初学者不知道在哪儿使用它们，所以我将要分享几个示例
2021-11-11