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值不同。

你可能感兴趣的:(Vue,vue.js,javascript,前端)