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-Jquery简介 入门了解篇
Nov 25 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
vue动态配置模板 'component is'代码
Jul 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
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
javascript的函数作用域
2014/11/12 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
实例解析Array和String方法
2016/12/14 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python中的闭包用法实例详解
2015/05/05 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python解析微信dat文件的方法
2020/11/30 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
学校周年庆活动方案
2014/08/22 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
房屋转让协议书
2014/10/18 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby