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 相关文章推荐
js时间日期和毫秒的相互转换
Feb 22 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
页面点击小红心js实现代码
May 26 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
vue下的@change事件的实现
Oct 25 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 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
德生PL990的分析评价
2021/03/02 无线电
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
React实现todolist功能
2020/12/28 Javascript
Django实现自定义404,500页面教程
2017/03/26 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
pandas的相关系数与协方差实例
2019/12/27 Python
np.dot()函数的用法详解
2020/01/17 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
协议书格式
2014/04/23 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年工程师工作总结
2014/11/25 职场文书
爱国影片观后感
2015/06/18 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
学生安全责任协议书
2016/03/22 职场文书
导游词之天津盘山
2019/11/01 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js