使用location.reload()

或者是

路由的 this.$router.go(0)

进行刷新的时候,是会出现一阵的空白区域的,因为是整个页面的刷新

,所以比较缓慢,因此使用了provide/inject的方法。

在App.vue中写入以下代码:

<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template> <script>
export default {
name: "app",
//提供一个依赖
provide(){
return {
reload:this.reload
}
},
data(){
return {
isRouterAlive:true
}
},
//声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive=true
})
}
}
};
</script> <style>
.size{
  width:100%;
  heigth:100%;
}
html,body{
.size;
margin: ;
padding: ;
}
#app {
.size;
}
</style>

子页面引用

<script>
export default {
inject:['reload'] ,
methods:{
reload(){
this.reload()
}
}
}
</script>

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

iview 表格随着更改刷新的更多相关文章

  1. vue iview表格应用

    今天看一下iview表格的使用.本文中有以下内容 table的必备部分(columns,data) render函数的使用(判断,添加样式,动态添加class...) slot使用 主要讲render ...

  2. iview 表格 某一列中设置radio

    在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...

  3. iView表格行验证问题

    iView Table 3.2.0 版本 需求: 验证前两行的姓名不能为空: 解决方案: 判断是否前两行,如是则增加校验规则: 需在<FormItem>前加<Form>标签否则 ...

  4. 关于动态添加iview admin路由以及刷新侧边栏

    在main.js中的mounted中使用router.addRouters()方法后界面上的路由并未刷新. 在注释掉路由跳转的权限限制之后,发现直接在地址栏输入对应路由能够进去,只是侧边栏没有刷新. ...

  5. iview表格高度自适应只需要三步即可

    1. 需要增加到table表格里的 highlight-row :height="tableHeight" ref="table" 2.在return 定义一个 ...

  6. js实现iview表格 排名列

    (有误,请勿观看) 一.排名的简单实现 //排名例子1 //需要排名的数组 //var myArray = [5,7, 7, 9, 8, 6, 23]; //新数组 //var thisArray = ...

  7. BootStrap--Tables(表格) MVC中不刷新做增,删,改(C#)

    自带的Tables会有自动分页,搜索等一些动能,很方便,唯一的不足就是添加,修改,删除数据需要刷新页面,并不能静态. 下面说的是如何不刷新页面(Ajax)去执行增,删,改操作. 需要用到的样式,JS库 ...

  8. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  9. [Swift通天遁地]二、表格表单-(5)实现表格下拉和上拉刷新效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. vue 自动px单位自动转换rem

    vue 适配移动端 假设设计图是375 第一步 安装 lib-flexible npm i lib-flexible --save 第二步 安装 px2rem-loader npm install p ...

  2. JQuery/JS插件 日期插件

    用于日期的计算,功能比较全,我常用的主要是日期的计算(多一天少一天,或者添加几个月等),日期格式化 网址:http://momentjs.cn/ 测试代码: <!DOCTYPE html> ...

  3. 探索性数据分析(Exploratory Data Analysis,EDA)

    探索性数据分析(Exploratory Data Analysis,EDA)主要的工作是:对数据进行清洗,对数据进行描述(描述统计量,图表),查看数据的分布,比较数据之间的关系,培养对数据的直觉,对数 ...

  4. UVA 12299 RMQ with shifts

    就是线段树的单点修改和区间查询. 然而输入打了一个小时才弄清楚. #include<iostream> #include<cstdio> #include<cstring ...

  5. 微信小程序开发:背景图片设置

    本文链接:https://blog.csdn.net/michael_f2008/article/details/86543134开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错: ...

  6. Electron 入门第一篇

    官网:http://electronjs.org/docs/tutorial/application-architecture 转载:https://blog.csdn.net/qq_33323731 ...

  7. 从安装PHP到第一个tomcat执行的hello world其实没那么难

    001 初入门的朋友问我为什么她的PHP老是不能安装运行成功,作为一个乐(shi)于(li)助(liao)人(mei)的半程序员, 自然是要好好研究然后手把手教妹纸了! 002 话不多说,进入正题 为 ...

  8. 使用Spring容器最简单的代码姿势

    如果仅仅是为了测试简单使用一下Spring的IOC容器,或者研究一下Spring的容器的源码实现,那么在搭建Spring工程的时候,不需要复杂的xml配置.Spring3.0之后提供了Java注解配置 ...

  9. JAVA Asponse.Word Office 操作神器,借助 word 模板生成 word 文档,并转化为 pdf,png 等多种格式的文件

    一,由于该 jar 包不是免费的, maven 仓库一般不会有,需要我们去官网下载并安装到本地 maven 仓库 1,用地址   https://www-evget-com/product/564  ...

  10. ajax提交json数据到后端C#解析

    本文链接:https://blog.csdn.net/qq_22103321/article/details/78015920 前端提交json数据 $.ajax({ type: "post ...