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 模拟用户单击事件
Dec 31 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
基于nodejs实现微信支付功能
2017/12/20 NodeJs
浅谈Angular单元测试总结
2019/03/22 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python3.x实现发送邮件功能
2018/05/22 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
浅谈python标准库--functools.partial
2019/03/13 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
2015年元旦文艺汇演主持词
2014/03/26 职场文书
老师对学生的评语
2014/04/18 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
javascript的setTimeout()使用方法总结
2021/11/20 Javascript