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 修改文件指定行的方法
May 15 Python
python连接远程ftp服务器并列出目录下文件的方法
Apr 01 Python
整理Python最基本的操作字典的方法
Apr 24 Python
python实现list由于numpy array的转换
Apr 04 Python
python 3.7.0 下pillow安装方法
Aug 27 Python
解决Shell执行python文件,传参空格引起的问题
Oct 30 Python
Python3实现的旋转矩阵图像算法示例
Apr 03 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
Jun 24 Python
Python实现线性插值和三次样条插值的示例代码
Nov 13 Python
pytorch数据预处理错误的解决
Feb 20 Python
Python实现AI自动抠图实例解析
Mar 05 Python
Python scrapy爬取起点中文网小说榜单
Jun 13 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程序的php代码
2008/04/07 PHP
php数据访问之增删改查操作
2016/05/09 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
门卫岗位职责
2013/11/15 职场文书
初一体育教学反思
2014/01/29 职场文书
低碳生活倡议书
2014/04/14 职场文书
学校师德师风整改措施
2014/10/27 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
离婚协议书格式
2015/01/26 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏