vue重新加载/刷新当前页面 改变url参数触发页面生命周期

vue页面在实际开发中,经常会遇到改变url参数,重新加载页面数据的需求,但是只改变页面url并不会触发组件的生命周期,这就需要用其他方法来实现了。

一、this.$router.go(0) 和 location.reload()

相当于刷新浏览器,会重新加载页面资源,体验相当差。

二、推荐使用:provide / inject 组合

在index.vue(与页面结构有关)文件,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。


 

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

在需要使用的子页面通过inject属性接收,直接调用this.reload(),只加载当前组件,并且触发组件的生命周期函数,不会刷新整个网站,效果很好



你可能感兴趣的:(vue,前端)