vue中刷新页面,vue实现页面刷新,vue项目刷新当前页面的三种方法

vue中刷新页面,vue实现页面刷新,vue项目刷新当前页面的三种方法

本文主要介绍了刷新vue项目当前页面的三种方法。这篇文章图文并茂,很好,有一定的参考价值。有需要的朋友可以参考一下。

想必你在挖vue的时候遇到过以下情况:比如在删除或者增加一条记录的时候,希望当前页面能够再次刷新或者如下:

如果要点击确定,对话框关闭时可以刷新http://localhost:9530/#/supplier/supplier当前页面。

然后可以重新加载表格的数据,对话框设置的数据在确认后可以刷新并出现在页面上。

这时,我们最直接的想法是想到以下几点:

但是,如果你尝试过,你会发现,你可以用vue-router重新路由到当前页面,页面不会刷新,一点作用都没有~所以这个方法出!

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

1.直接刷新整个页面:

位置。重新加载()

这个。$router.go(0)

两者都可以刷新当前页面,但缺点是相当于按ctrl+F5强制刷新。当整个页面重新加载时,会出现即时空白页,体验不好。

2.创建一个新的空白页,supplierAllBack.vue先点击确定跳转到这个空白页,然后立即跳回。

空白页supplierAllBack.vue中的内容:

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

3.提供/注入相结合的方法是我尝试过的最实用的方法。下面是项目截图来说明:首先你要修改你的app.vue

通过声明reload方法,您可以控制路由器视图的显示或隐藏,从而控制页面的重新加载,这在这里定义

IsRouterAlive//要控制的true或false

然后将App.vue组件提供的重载依赖注入到需要刷新当前页面的页面中,然后用this.reload直接调用它

总结

以上是边肖介绍的刷新vue项目当前页面的三种方法。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!

vue中刷新页面,vue实现页面刷新,vue项目刷新当前页面的三种方法