vue实现局部刷新的实现示例


Posted in Javascript onApril 16, 2019

利用Vue里面的provide+inject组合(走过路过,不要错过)

使用2.2.0 新增的provide / inject控制<router-view>的显示隐藏

在App.vue中使用provide

//App.vue
<template>
  <div>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        isRouterAlive: true
      }
    },
    provide(){ //提供
      return {
        reload: this.reload
      }
    },
    methods: {
      reload(){
        this.isRouterAlive = false
        this.$nextTick( function () {
          this.isRouterAlive = true
        })
      }
    }
  }
</script>

在使用局部刷新的组件中使用inject

<script>
  export default {
    name: 'myComponent',
    data () {
      return {}
    },
    inject: ['reload'], //注入
    methods: {
      myCallBack(){
        // ...
        this.reload() //局部刷新
      }
    }
  }
</script>

其他的刷新页面方法

  • window.location.reload() //有白屏

默认参数是 false,它会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变;

如果文档已改变,reload() 会再次下载该文档;

如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

参数为 true,无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样

  • this.$router.go(0) //有白屏

先跳转到一个空白页面再跳转回来 //虽不会一闪,但是能看见路由快速变化

//需要页面刷新的地方,跳转到一个空白页
this.$router.push('/emptyPage')

//空白页
beforeRouteEnter (to, from, next) {
   next(vm => {
    vm.$router.replace(from.path)
   })
}

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

Javascript 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
介绍一些PHP判断变量的函数
2012/04/24 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python实现的特征提取操作示例
2018/12/03 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
新年团拜会主持词
2014/04/02 职场文书
安全演讲稿大全
2014/05/09 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL