Vue 刷新当前页面,并重新加载页面数据
业务场景:在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。(其他方法:this.$router.go(0),会强制刷新,出现空白页面体验不好)
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> flase -> show
具体代码如下:
1.首先在我们的根组件APP.vue里面,写入刷新方法,路由初始状态是显示的
<template>
<div id="app">
<keep-alive>
<router-view v-show="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="isRouterAlive"/>
<Tabbar v-show="$route.meta.showFooter"></Tabbar>
</div>
</template> <script>
// 样式重置 common.css
import "./assets/common.css"
import SHeader from './components_c/SearchHeader.vue'
import Tabbar from './components_c/Tabbar'
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
components:{
SHeader,
Tabbar
}, methods: {
reload (){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive = true
})
}
} }
</script> <style lang="scss" scoped> </style>
<router-view v-if="isRouterAlive"></router-view> 在isRouterAlive 为true的地方 使用刷新 ,然后在其他组件或者页面中调用相应方法就行
2、然后在子组件中引用
3、执行完相应操作之后,调用reload方法
Vue 刷新当前页面,并重新加载页面数据的更多相关文章
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- Loading加载页面
一般页面有四种情况 加载中 :就是滚动页面,后台获取加载的数据,每个页面的数据不同所以就让子类来实现,直接抽象abstract了. 加载失败 :一般都需要点击后重新加载 空页面 :也需要点击后重新加载 ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- JS 返回上一页并刷新,但不用重新加载整个页面(ajax实现)
需求 有三个页面A.B.C,点击A=>B,点击B=>C,在C中添加内容,点击确定返回到B,此时B页面需重新加载新的内容.再次点击B的返回按钮,希望返回到A而不是C. ===== 2017/ ...
- 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页
jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- apache和nginx结合使用
1 有时候我们希望将nginx和apache结合起来使用,nginx接受用户的请求,作为请求转发服务器,apache作为后端服务器. 2 配置如下 nginx 中将80端口的请求转发到8000端口上 ...
- UML各种图
UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言.下面将对UML的九种图+包图的基本概念进行介绍以及各 ...
- 17 python 初学(迭代器)
生成器都是迭代器,迭代器不一定是生成器 迭代器满足两个条件: 1. 有iter方法 2. 有next方法 # list, tuple, dict, string: iterable(他们都有iter方 ...
- The authenticity of host 'ip (ip)' can't be established.
问题 The authenticity of host '10.4.172.67 (10.4.172.67)' can't be established.ECDSA key fingerprint i ...
- ASCII,unicode, utf8 ,big5 ,gb2312,gbk,gb18030等几种常用编码区别(转载)
原文出处:http://www.blogjava.net/xcp/archive/2009/10/29/coding2.html 最近老为编码问题而烦燥,下定决心一定要将其弄明白!本文主要总结网上一些 ...
- Linux 内核协议栈 学习资料
终极资料 1.<Understanding Linux Network Internals> 2.<TCP/IP Architecture, Design and Implement ...
- Vue+element-ui 重置组件样式的写法
两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css' 方案2:每个.vu ...
- 图解SSH原理及两种登录方法
SSH(Secure Shell)是一套协议标准,可以用来实现两台机器之间的安全登录以及安全的数据传送,其保证数据安全的原理是非对称加密. 传统的对称加密使用的是一套秘钥,数据的加密以及解密用的都是这 ...
- 朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车
朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车 [下载本文PDF进行阅读] 这里所说的三架马车是指微服务.消息队列和定时任务.如下图所示,这里是一个三驾马车共同驱动的一个立体的互联网项目的架构 ...
- BZOJ1997 平面图判定 平面图性质 2-sat
相交的两条边不能在同一侧,用2-sat即可. 平面图点数-边数关系 \(E\le 3V-6\) 写这篇文章我只是想说明,知乎一小时,题解一分钟. lb Zhihu, gos langar Qarwet ...