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

笔者vue-router版本

vue-router@4

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

解决方法

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

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

2. 引入vue-router的「onBeforeRouteUpdate」方法

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

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

两种方法都是通过监听路由变化去重新执行请求方法。