本文主要介绍了刷新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项目当前页面的三种方法。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!