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关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
validform表单验证的实现方法
Mar 08 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
JavaScript实现移动端拖动元素
Nov 24 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
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
tab栏切换原理
2017/03/22 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python实现井字棋小游戏
2020/03/04 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
大学生评语大全
2014/04/18 职场文书
授权委托书格式范文
2014/08/02 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
基层党支部承诺书
2015/04/30 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python