痛点:用vue搭建的后台管理系统中,一般点击左侧当前菜单,当前组件是无法刷新的。
问题原因:点击相同菜单,因为vue的路由机制是处于相同的路由下,路由组件不重新渲染,因此点击相同路由,vue路由系统不做任何的响应。
解决方案思路:vue的路由机制是无法改变的,但是结合我们的项目发现,如果点击相同的路由,我们可以动态的销毁当前组件,再重新加载,这样就达到了重新渲染的效果。
实际操作:
- 给路由菜单添加click事件,点击即销毁当前组件
- 如何销毁当前组件?在<app-main v-if="isRouterAlive" />通过v-if控制,转为false后立马在转为true,可以实现对整个项目组件的销毁控制
- 因为每个路由菜单都是调用相同的函数销毁组件,所以可以通过@Provide 和 @Inject 装饰器实现对函数的复用
网友评论