使用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. chmod/chown/chgrp/chattr

    权限组合其实就是二进制的组合 注意,用户只能修改属于自己的文件 仅管理员可以修改文件的数组和属主 chmod 三种使用方法 文件的特殊权限 SUID SGID Sticky chowm 修改文件,目录 ...

  2. 设置win 10 软件开机启动

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp 将快捷方式粘贴进去即可

  3. mingw w64的下载地址

    mingw w64的下载地址,官网下载看得太晕.直接记下下载链接. https://sourceforge.net/projects/mingw-w64/ i686纯32位版供32位win系统使用.x ...

  4. Codeforces 839D Winter is here - 暴力 - 容斥原理

    Winter is here at the North and the White Walkers are close. John Snow has an army consisting of n s ...

  5. 重新学习Mysql数据13:Mysql主从复制,读写分离,分表分库策略与实践

    一.MySQL扩展具体的实现方式 随着业务规模的不断扩大,需要选择合适的方案去应对数据规模的增长,以应对逐渐增长的访问压力和数据量. 关于数据库的扩展主要包括:业务拆分.主从复制.读写分离.数据库分库 ...

  6. 动态代理之投鞭断流!看一下MyBatis的底层实现原理

    转:https://mp.weixin.qq.com/s?__biz=MzI1NDQ3MjQxNA==&mid=2247486856&idx=1&sn=d430be5d14d1 ...

  7. Mybatis(下)

    Mybatis(下) 一.MaBatis核心配置文件 Mybatis 中文文档 Mybatis 中文文档 1. properties 定义属性及读取属性文件,取的时候用 $(name) ,name 为 ...

  8. 【2019.09.19】数独(Sudoku)游戏之我见(软工实践第三次作业)

    Github项目地址:https://github.com/MokouTyan/suduku_131700101 [2019.09.20]更新:代码经过Code Quality Analysis工具的 ...

  9. Laravel模型事件的实现原理详解

    模型事件在 Laravel 的世界中,你对 Eloquent 大多数操作都会或多或少的触发一些模型事件,下面这篇文章主要给大家介绍了关于Laravel模型事件的实现原理,文中通过示例代码介绍的非常详细 ...

  10. 修改 commit 历史

    修改 commit 历史 参考:修改 git 历史提交 commit 信息(重写历史)git 修改已提交的内容 git init echo t.md>.gitignore git add .gi ...