vue跳转相同路由强制刷新该相同路由组件
而vue自身如果路由不变的情况下是不会这样做的,就是说跳转的路由和当前的路由相同,vue不会进行任何操作,平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。如果想销毁原路由组件并重新加载一个相同的路由,需要进行以下操作。这样跳转相同路由就能强制刷新组件了,因为key值不同。
·
平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。
而vue自身如果路由不变的情况下是不会这样做的,就是说跳转的路由和当前的路由相同,vue不会进行任何操作,原本路由组件不会被销毁(路由组件中数据等信息不会改变)
如果想销毁原路由组件并重新加载一个相同的路由,需要进行以下操作
- 在进行路由跳转push时绑定一个随机query参数(携带路由参数),例如时间戳或者随机数:
this.$router.push({
path:"/xxx",
query:{
t: Date.now(),
},
});
- 在路由容器上绑定key值,key值是一个唯一的值(由路由跳转时携带的随机参数组成 $route.query.t ),路由跳转时,key值会发生变化,这样就会重新渲染当前路由组件
<router-view :key="$route.path + $route.query.t"></router-view>
这样跳转相同路由就能强制刷新组件了,因为key值不同。
更多推荐
已为社区贡献4条内容
所有评论(0)