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 10 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
Apr 18 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
May 13 Python
Python3简单实现串口通信的方法
Jun 12 Python
Python实现的远程文件自动打包并下载功能示例
Jul 12 Python
通过celery异步处理一个查询任务的完整代码
Nov 19 Python
numpy ndarray 取出满足特定条件的某些行实例
Dec 05 Python
python中for in的用法详解
Apr 17 Python
Python3 pywin32模块安装的详细步骤
May 26 Python
浅谈Keras中shuffle和validation_split的顺序
Jun 19 Python
使用Pytorch搭建模型的步骤
Nov 16 Python
Python基础之常用库常用方法整理
Apr 30 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二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python生成ppt的方法
2018/06/07 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
tensorflow 查看梯度方式
2020/02/04 Python
python实现梯度下降法
2020/03/24 Python
详解python tkinter 图片插入问题
2020/09/03 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
主持人演讲稿范文
2013/12/28 职场文书
学生思想表现的评语
2014/01/30 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
工作建议书范文
2014/05/13 职场文书
篮球赛口号
2014/06/18 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2015年调度员工作总结
2015/04/30 职场文书
社区党建工作总结2015
2015/05/13 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL中日期型单行函数代码详解
2021/06/21 MySQL