详解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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
JavaScript this关键字的深入详解
Jan 14 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
用php过滤危险html代码的函数
2008/07/22 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python 杀死自身进程的实现方法
2019/07/01 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
什么是Rollback Segment
2013/04/22 面试题
爱情保证书范文
2014/02/01 职场文书
简历里的自我评价范文
2014/02/24 职场文书
企业环保标语
2014/06/10 职场文书
销售目标责任书
2014/07/23 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
js Proxy的原理详解
2021/05/25 Javascript
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers