详解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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
原生JS实现拖拽功能
Dec 16 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
JS作用域深度解析
2016/12/29 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
土建资料员岗位职责
2014/01/04 职场文书
董事长助理岗位职责
2014/02/18 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2014年服务员工作总结
2014/11/18 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python