vue 同路由携带不同参数跳转无法刷新问题解决方法
·
前言
当跳转同一路由,携带不同参数时,组件会被复用,生命周期之前创建了一次,不会再次重新创建,因此页面不会刷新
可以考虑一下几种解决方法:
方法一:使用watch监听路由参数的变化,并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。
watch: {
$route(to, from) {
// 在这里根据参数的变化执行刷新页面的逻辑
}
}
方法二:使用key属性给组件添加唯一标识,当路由参数发生变化时,通过修改key的值来重新渲染组件,从而达到刷新页面的效果。
<router-view :key="$route.fullPath"></router-view>
方法三:当一个组件复用时,传递的参数发生变化就会触发这个钩子函数,在路由配置中使用beforeRouteUpdate守卫,该守卫会在当前路由更新时被调用,可以在守卫中执行刷新页面的逻辑
beforeRouteUpdate(to, from, next) {
// 在这里执行刷新页面的逻辑
next();
}
方法四:可以考虑使用vuex来管理路由参数,在每次路由跳转时将参数存储到vuex中,在需要刷新页面时,通过修改参数的值来触发刷新。
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)