关于vue.js:vue项目刷新当前页面的三种方法

40次阅读

共计 825 个字符,预计需要花费 3 分钟才能阅读完成。

想必大家在刨坑 vue 的时候也遇到过上面情景:比方在删除或者减少一条记录的时候心愿以后页面能够从新刷新或者如上面这种:

如果心愿点击确定的时候,Dialog 对话框敞开的时候,以后 http://localhost:9530/#/supplier/supplierAll 页面能够从新刷新下

那么表格的数据能够从新加载,Dialog 对话框设置的数据能够在确定后刷新呈现在页面上

这时候咱们最间接的思维就是想到上面这种:

然而,试过的会发现用 vue-router 从新路由到以后页面,页面是不进行刷新的,基本没有任何作用~ 所以这个办法 out!

上面我这边整顿几种可圈可点的三种形式,大家能够自行的抉择:

1、最间接整个页面从新刷新:

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

这两种都能够刷新以后页面的,毛病就是相当于按 ctrl+F5 强制刷新那种,整个页面从新加载,会呈现一个霎时的空白页面,体验不好

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

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

这个形式,相比第一种不会呈现一瞬间的空白页,只是地址栏有个疾速的切换的过程,可采纳

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

通过申明 reload 办法,管制 router-view 的显示或暗藏,从而管制页面的再次加载,这边定义了

isRouterAlive //true or false 来管制

而后在须要以后页面刷新的页面中注入 App.vue 组件提供(provide)的 reload 依赖,而后间接用 this.reload 来调用就行

总结

以上所述是小编给大家介绍的 vue 我的项目刷新以后页面的三种办法,心愿对大家有所帮忙,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的反对!

正文完
 0