Vue如何刷新当前页面,vue项目如何刷新当前页面

时间:2020-04-28 18:48来源:亚洲城ca88唯一官方网站
注入reload方法 1.在App.vue,表明reload方法,调控router-view的来得或潜伏,进而调节页面包车型地铁再一次加载。 三、推荐消灭情势: 提示: provide  和  inject  绑定并非可响应的。那是特

注入reload方法

图片 1

1.在App.vue,表明reload方法,调控router-view的来得或潜伏,进而调节页面包车型地铁再一次加载。

图片 2

三、推荐消灭情势:

提示:provide 和 inject 绑定并非可响应的。那是特意为之的。要是您传入了叁个可监听的目的,那么其目的的天性照旧可响应的。

时间: 2019-12-22阅读: 76标签: 项目

1.场景

template div router-view v-if="isRouterAlive"/ /div/templatescriptexport default { name:"app", provide(){return{ reload:this.reload} }, data(){return{ isRouterAlive:true //控制router-view的显示或隐藏} }, methods:{reload(){ this.isRouterAlive = false; this.$nextTick(()={this.isRouterAlive = true; })} }}/script

 

二、消除的主意及碰到的主题材料

3.消除办法

this.$router.go(0State of Qatar。这种措施纵然代码比较少,独有一行,可是经历非常差。页面会一眨眼间间的白屏,体验不是很好用vue-router重新路由到当下页面,页面是不举办刷新的。.location.reload(卡塔尔国。这种也是同样,画面一闪,体验不是很好

 

成效落成:那时点击相关学科必要再一次加载刷新当前路由

图片 3

直白调用 this.reload

图片 4

花色需求是:在课程详细的情况页 点击 相关学科 还在脚下页面看此课程实际情况;

 

规律:允许一个祖先组件向其抱有子孙后代注入三个依赖,无论组件档案的次序有多少深度,并在起上上游关系建构的小时里始终身效

深切精晓数据驱动

2.在急需利用刷新的页面中流入App.vue组件提供(provide)的 reload 信任,在逻辑达成之后,直接this.reload()调用,就能够刷新当前页面。

tableList.vue:

一、场景:

2.遇到的题材

用 provide / inject 组合

  1. 获得列表方法

2.双重获取数据

在页面注入App.vue组件提供(provide)的 reload 正视,在逻辑达成今后(删除或增加...),间接this.reload(State of Qatar调用,就可以刷新当前页面。

provide:选项应该是四个目的或回到三个指标的函数。该对象富含可注入其子孙的性质。

  1. 用vue-router重新路由到近些日子页面,页面是不进行刷新的

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

在管理列表时,常有删除一条数据大概新增扩张少之后供给再度刷新当前页面包车型大巴供给。

4.provide / inject 用法

2.使用window.reload(卡塔尔国,恐怕router.go(0卡塔尔国刷新时,整个浏览器进行了再也加载,闪烁,体验倒霉

==========================================

效果与利益:允许叁个祖辈组件向其独具子孙后代注入二个依据,无论组件档案的次序有多少深度,并在起上上游关系建构的时刻里始终身效。

以上算是开采进程中的叁个坑,用了一段时间,后天再读代码的时候,感到被坑的很要紧。

provide / inject 组合

3.那样重复调用获取数据,就能够一并达成页面数据更新(不会重新刷新页面),同有时间保障有分页时,能够停留在当前页(刷新前倘使是第二页,刷新后照旧在第二页),

申明reload方法,调整router-view的展现或蒙蔽,进而调整页面包车型地铁重复加载

即其余查询条件保险不改变,体验效果好

图片 5

 

 

App.vue:

编辑:亚洲城ca88唯一官方网站 本文来源:Vue如何刷新当前页面,vue项目如何刷新当前页面

关键词: 亚洲城ca88