解决vue项目 点击相同菜单栏页面不刷新

痛点:用vue搭建的后台管理系统中,一般点击左侧当前菜单,当前组件是无法刷新的。

问题原因:点击相同菜单,因为vue的路由机制是处于相同的路由下,路由组件不重新渲染,因此点击相同路由,vue路由系统不做任何的响应。

解决方案思路:vue的路由机制是无法改变的,但是结合我们的项目发现,如果点击相同的路由,我们可以动态的销毁当前组件,再重新加载,这样就达到了重新渲染的效果。

实际操作:

  1. 给路由菜单添加click事件,点击即销毁当前组件
  2. 如何销毁当前组件?在<app-main v-if="isRouterAlive" />通过v-if控制,转为false后立马在转为true,可以实现对整个项目组件的销毁控制
  3. 因为每个路由菜单都是调用相同的函数销毁组件,所以可以通过@Provide 和 @Inject 装饰器实现对函数的复用
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容