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

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

作者: 梦舟缘钓 | 来源:发表于2020-06-28 17:13 被阅读0次

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

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

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

    实际操作:

    1. 给路由菜单添加click事件,点击即销毁当前组件
    2. 如何销毁当前组件?在<app-main v-if="isRouterAlive" />通过v-if控制,转为false后立马在转为true,可以实现对整个项目组件的销毁控制
    3. 因为每个路由菜单都是调用相同的函数销毁组件,所以可以通过@Provide 和 @Inject 装饰器实现对函数的复用

    相关文章

      网友评论

          本文标题:解决vue项目 点击相同菜单栏页面不刷新

          本文链接:https://www.haomeiwen.com/subject/bgpwfktx.html