vue-router同页面无法刷新问题

最新推荐文章于 2024-08-12 09:32:01 发布

原创最新推荐文章于 2024-08-12 09:32:01 发布 · 461 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在VueRouter4中遇到的页面跳转不更新数据的问题，通过watch路由查询/参数变化和利用`onBeforeRouteUpdate`方法，监听路由变化并重新执行数据获取，确保页面内容同步更新。

笔者vue-router版本

vue-router@4

通常我们点击事件跳转时，会发现同一个页面跳转会无法更新数据
场景比方说详情页跳转，页面下方会有其它的详情页链接，只是id不同，
push后并未数据更新

解决方法

使用watch，监听route的query/params变化，然后可以拿到最新的值，然后在执行数据获取的代码

 watch(()=> route.query,()=>{
       console.log('路由变化了',route)
       name.value = route.query.name
  })

引入vue-router的「onBeforeRouteUpdate」方法

import { useRoute,useRouter,onBeforeRouteUpdate} from 'vue-router'

onBeforeRouteUpdate((to,from,next)=>{
   // id.value = to.params.id;
   // 拿到最新的params/query中传递过来的参数，重新执行获取数据的函数即可
   // to do...
})