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


Posted in Python onDecember 29, 2020

在我们修改过页面的某些数据后,通过想要把页面刷新一下,看看修改后的结果。由于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 相关文章推荐
Python三元运算实现方法
Jan 12 Python
Python随手笔记第一篇(2)之初识列表和元组
Jan 23 Python
python对象及面向对象技术详解
Jul 19 Python
浅析PHP与Python进行数据交互
May 15 Python
python读取文本绘制动态速度曲线
Jun 21 Python
Python实现截取PDF文件中的几页代码实例
Mar 11 Python
Python 调用 Windows API COM 新法
Aug 22 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
Sep 20 Python
解决安装pyqt5之后无法打开spyder的问题
Dec 13 Python
使用Django实现把两个模型类的数据聚合在一起
Mar 28 Python
pyqt5实现井字棋的示例代码
Dec 07 Python
python实现简单的名片管理系统
Apr 26 Python
Python实现对word文档添加密码去除密码的示例代码
Dec 29 #Python
利于python脚本编写可视化nmap和masscan的方法
Dec 29 #Python
Python基于mediainfo批量重命名图片文件
Dec 29 #Python
用python批量下载apk
Dec 29 #Python
python如何调用php文件中的函数详解
Dec 29 #Python
详解Open Folder as PyCharm Project怎么添加的方法
Dec 29 #Python
pycharm如何设置官方中文(如何汉化)
Dec 29 #Python
You might like
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
学习python处理python编码问题
2011/03/13 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python识别html主要文本框过程解析
2020/02/18 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
门卫岗位安全职责
2013/12/13 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
总经理岗位职责
2015/02/04 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
PHP新手指南
2021/04/01 PHP
对象析构函数__del__在Python中何时使用
2022/03/22 Python