vue Vue路由跳转到同一组件后,路由参数更新但是数据不更新
详细描述
组件复用,导致跳转相同组件的页面时,组件内容不刷新
版本信息
Vue3
复现过程
用Vue3写管理后台时,考虑组件复用,因此将增删改查全部封装,结构如下:
那列表页举例,再跳转不同的栏目时,路由已经变化,但是生命函数不生效,界面内容也没有重新渲染。
解决方案
然后自己试过很多办法,比如监听路由,或者每次点击菜单强刷更新等等,这都不是最优解。只需要给父组件的路由视图部分加上:key="$route.fullPath"即可。这样Vue就会认为时不同的子组件,会重新渲染界面,而且钩子也会生效。
<router-view :key="$route.fullPath"></router-view>

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