www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

Vue怎样刷新当前页面,vue项目什么刷新当前页面

2020-04-23 01:00 来源:未知

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

1.场景

时间: 2019-07-07阅读: 224标签: 刷新

一、场景:

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:

项目需求是:在课程详情页 点击 相关课程 还在当前页面看此课程详情;

2.遇到的问题

如果希望点击确定的时候,Dialog 对话框关闭的时候,当前#/supplier/supplierAll页面可以重新刷新下

功能实现:这时候点击相关课程需要重新加载刷新当前路由

  1. 用vue-router重新路由到当前页面,页面是不进行刷新的

那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

二、解决的办法及遇到的问题

2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

这时候我们最直接的思维就是想到下面这种:

this.$router.go(0)。这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好用vue-router重新路由到当前页面,页面是不进行刷新的。.location.reload()。这种也是一样,画面一闪,体验不是很好

3.解决方法

但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!

三、推荐解决方法:

provide / inject 组合

下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:

用 provide / inject 组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

1、最直接整个页面重新刷新:

原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

 

location. reload()this.$router.go(0)

1.在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。

App.vue:

这两种都可以刷新当前页面的,缺点就是相当于按ctrl F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

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

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来

2.在需要用到刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后,直接this.reload()调用,即可刷新当前页面。

图片 1

空白页supplierAllBack.vue里面的内容:

注入reload方法

 

这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

直接调用 this.reload

tableList.vue:

3、provide / inject组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

图片 2

isRouterAlive //true or false 来控制

图片 3

然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

 

4.provide / inject 用法

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

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

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

 

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

深入理解数据驱动

以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

  1. 获取列表方法

图片 4

2.重新获取数据

图片 5

3.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

即其他查询条件保持不变,体验效果好

 

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:Vue怎样刷新当前页面,vue项目什么刷新当前页面