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 相关文章推荐
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
JavaScript文档对象模型DOM
Nov 20 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缓冲区为你的站点加速
2015/10/10 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python 同时读取多个文件的例子
2019/07/16 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
应届生如何写自荐信
2014/01/05 职场文书
市场营销工作计划书
2014/05/06 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
logback如何自定义日志存储
2021/08/30 Java/Android
JS中如何优雅的使用async await详解
2021/10/05 Javascript