vue跳转相同路由强制刷新该相同路由组件

平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。
而vue自身如果路由不变的情况下是不会这样做的,就是说跳转的路由和当前的路由相同,vue不会进行任何操作,原本路由组件不会被销毁(路由组件中数据等信息不会改变)
如果想销毁原路由组件并重新加载一个相同的路由,需要进行以下操作

  1. 在进行路由跳转push时绑定一个随机query参数(携带路由参数),例如时间戳或者随机数:
this.$router.push({
  path:"/xxx",
  query:{
    t: Date.now(),
  },
});
  1. 在路由容器上绑定key值,key值是一个唯一的值(由路由跳转时携带的随机参数组成 $route.query.t ),路由跳转时,key值会发生变化,这样就会重新渲染当前路由组件
<router-view :key="$route.path + $route.query.t"></router-view>

这样跳转相同路由就能强制刷新组件了,因为key值不同。

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值