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 相关文章推荐
在Python3中初学者应会的一些基本的提升效率的小技巧
Mar 31 Python
进一步了解Python中的XML 工具
Apr 13 Python
Scrapy爬虫实例讲解_校花网
Oct 23 Python
python实现求解列表中元素的排列和组合问题
Mar 15 Python
Python解析并读取PDF文件内容的方法
May 08 Python
python爬取足球直播吧五大联赛积分榜
Jun 13 Python
Python实现SQL注入检测插件实例代码
Feb 02 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
Jun 08 Python
Django 批量插入数据的实现方法
Jan 12 Python
Python unittest 自动识别并执行测试用例方式
Mar 09 Python
在echarts中图例legend和坐标系grid实现左右布局实例
May 16 Python
Python根据URL地址下载文件并保存至对应目录的实现
Nov 15 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python编程之序列操作实例详解
2017/07/22 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python对切片命名的实现方法
2018/10/16 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
销售行政专员职责
2014/01/03 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015新学期家长寄语
2015/02/26 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
python周期任务调度工具Schedule使用详解
2021/11/23 Python