平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。
而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值不同。

GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐