vue跳转相同路由强制刷新该相同路由组件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。
而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值不同。
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 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)