详解vue几种主动刷新的方法总结


Posted in Javascript onFebruary 19, 2019

当我们在做项目时,我们需要做当前页面的刷新来达到数据更新的目的,在此我们大概总结了几种常用的页面刷新的方法。

1.window.location.reload(),是原生JS提供的方法,this.$router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。

2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来:

当前页面:

<template>
 <div>
 <el-button type="primary" class="btn" @click="btnaction">摁我刷新页面</el-button>
 </div>
</template>
<script>
 export default{
 data(){
  return{
  }
 },
 mounted(){
 },
 methods:{
  btnaction() {
//  location.reload()
//       this.$router.go(0)
        this.$router.replace({
         path:'/empty',
         name:'empty'
        })
  }
 }
 }
</script>

空白页面:

<template>
 <h1>
 空页面
 </h1>
</template>
 
<script>
 export default{
 data() {
  return{
  
  }
 },
 created(){
  this.$router.replace({
         path:'/',
         name:'father'
        })
 }
 }
</script>

当点击按钮时地址栏会有快速的地址切换过程。

3.控制<router-view></router-view>的显示与否,在全局组件注册一个方法,该方法控制router-view的显示与否,在子组件调用即可:

APP.vue

<template>
 <div id="app">
  <router-view v-if="isRouterAlive"></router-view>
 </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
    console.log('reload')
   })
  }
 }
}
</script>

当前组件:

<template>
 <div>
 <el-button type="primary" class="btn" @click="btnaction">摁我刷新页面</el-button>
 </div>
</template>
 
<script>
 export default{
 inject: ['reload'], // 引入方法
 data(){
  return{
  }
 },
 components:{
 },
 mounted(){
 },
 methods:{
  btnaction() {
//  location.reload()
//       this.$router.go(0)
//       this.$router.replace({
//        path:'/empty',
//        name:'empty'
//       })
        this.reload() // 调用方法
  }
 }
 }
</script>

当点击按钮时所有页面重新渲染。

4.对列表操作后的表格刷新的操作方法:

当我们在操作数据表格时,会对表格进行增删改查,做完操作我们需要对列表进行刷新来达到重新渲染,但是当如果存在分页,我们在比如第3页进行删除操作,如果按照以往的刷新方法,刷新完后便进入了第一页,这肯定不是我们想要的,这时候我们常用的做法是重新调用数据渲染方法,通常我们会有获取数据接口,删除接口等等,页面加载时调用获取数据的方法,当我们执行删除操作时,再重新调用获取数据的方法即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
Vue动态路由缓存不相互影响的解决办法
Feb 19 #Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 #Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
Vue结合后台导入导出Excel问题详解
Feb 19 #Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 #Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 #Javascript
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
node.js实现快速截图
2016/08/27 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
关于numpy数组轴的使用详解
2019/12/05 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
高三复习计划
2015/01/19 职场文书
防卫过当辩护词
2015/05/21 职场文书