来自 Web前端 2020-04-15 19:02 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

整个浏览器进行了重新加载,对话框设置的数据

时间: 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,点击确定的时候先跳转到这个空白页,然后再立马跳转回来

本文由澳门三合彩票发布于Web前端,转载请注明出处:整个浏览器进行了重新加载,对话框设置的数据

关键词: