vue实现局部刷新的实现示例

利用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)
   })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router路由参数刷新消失的问题解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

  • vue2.0结合DataTable插件实现表格动态刷新的方法详解

    vue2.0结合DataTable插件实现表格动态刷新的方法详解

    本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以

  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

  • vue 解决addRoutes动态添加路由后刷新失效问题

    vue 解决addRoutes动态添加路由后刷新失效问题

    前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • vue项目如何刷新当前页面的方法

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制r

  • vue实现局部刷新的实现示例

    利用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> <s

  • flutter局部刷新的实现示例

    局部刷新 我们在做项目的时候,都需要单独的去刷新一个值,而不是把整个界面都重绘.大家都知道setState是进行重绘的一个方法,他会执行生命周期的一个build,这将会使得整个界面来进行重绘.当然我们也会说把他进行状态管理,因为我个人不是很喜欢用provider进行状态管理,而是使用steam和event_bus进行传值和管理,当然自然的代码就会多了,所以我现在也在寻找provider更简单的方法,当然这里就不说了,在跟其他人聊的时候,都说好久没有更新了.那是因为有点忙,也变得懒了.现在刚好趁着

  • Vue实现页面的局部刷新(router-view页面刷新)

    Vue实现页面的局部刷新(router-view页面刷新)

    利用Vue里面的provide+inject组合 首先需要修改App.vue. <template> <!-- 公司管理 --> <div class="companyManage"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default {

  • 关于react中列表渲染的局部刷新问题

    目录 react中列表渲染的局部刷新 react实现实时/局部刷新 初始做法示例 增加数据 修改数据 删除数据 react中列表渲染的局部刷新 最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过react的列表方法渲染: let list=[     {         id:1,         show:false     },     {    

  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    目录 一.全页面刷新 二.局部刷新 三.应用场景 总结 一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide() { // 父组件中返回要传

  • Flutter StreamBuilder组件实现局部刷新示例讲解

    Flutter StreamBuilder组件实现局部刷新示例讲解

    目录 一.前言 二.StreamBuilder 简介 三.StreamBuilder的实际应用 总结 一.前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作.包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求. 本文记录的是通过St

  • 使用ajax局部刷新gridview进行数据绑定示例

    具体代码如下: 复制代码 代码如下: <% @ Page Language = " C# " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < script runat ="server" &

  • 使用updatepanel局部刷新实现注册时对用户名的检测示例

    通过将控件放入到updatepanel中,实现局部刷新.前台代码: 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> //必须有且写在updatepanel前面<asp:updatepanel runat="server" id="updatepanel1"><c

  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

  • 浅析PHP页面局部刷新功能的实现小结

    方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制代码 代码如下: <?phpheader("cache-control:no-cache,must-revalidate");  header("Content-Typ

随机推荐