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中join和split用法实例
Apr 14 Python
Python操作Word批量生成文章的方法
Jul 28 Python
Python多层嵌套list的递归处理方法(推荐)
Jun 08 Python
用python处理图片实现图像中的像素访问
May 04 Python
详解Django中间件执行顺序
Jul 16 Python
python爬虫之线程池和进程池功能与用法详解
Aug 02 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
Aug 30 Python
python使用Plotly绘图工具绘制散点图、线形图
Apr 02 Python
python字符串替换第一个字符串的方法
Jun 26 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
Oct 18 Python
pytorch 自定义参数不更新方式
Jan 06 Python
opencv之颜色过滤只留下图片中的红色区域操作
Jun 05 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue实现简单图片上传
2020/06/30 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
python实现跨文件全局变量的方法
2014/07/07 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
pycharm运行scrapy过程图解
2019/11/22 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
中文专业毕业生自荐信
2014/05/24 职场文书
先进党支部申报材料
2014/12/24 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技