vue Vue路由跳转到同一组件后,路由参数更新但是数据不更新

· 阿靠北啊 · 268阅读 · 2022-09-26

详细描述

组件复用,导致跳转相同组件的页面时,组件内容不刷新

版本信息

Vue3

复现过程

用Vue3写管理后台时,考虑组件复用,因此将增删改查全部封装,结构如下:

那列表页举例,再跳转不同的栏目时,路由已经变化,但是生命函数不生效,界面内容也没有重新渲染。

解决方案

然后自己试过很多办法,比如监听路由,或者每次点击菜单强刷更新等等,这都不是最优解。只需要给父组件的路由视图部分加上:key="$route.fullPath"即可。这样Vue就会认为时不同的子组件,会重新渲染界面,而且钩子也会生效。

<router-view :key="$route.fullPath"></router-view>

文章有用

已有 119人 推荐该文章,推荐越多越容易获得的官方扶持

微信扫码分享