router.replace携带参数不一致

H5在用户列表页面a选择用户后，进入用户详情界面b，在返回时携带修改后的参数，但是在a页面参数并没有及时获取到。

场景复现

不通过页面按钮点击，从浏览器后退按钮返回A模拟手机返回上一页。因为用户列表通过主页进入的，在卸载时调用push会导致无法返回到主页，所以需要调用replace方法

b.vue

可以看到，不管是地址栏还是页面，参数都是存在的，但是打印是空对象

解决办法

使用onBeforeRouteUpdate

a.vue

<template>
  <div>A</div>
  {{ route.query }}
  <button @click="test">push去B</button>
</template>

<script setup lang='ts'>
import {ref} from "vue"
import { useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()
const router = useRouter()

onBeforeRouteUpdate((to,from)=>{
  console.log(to,from);
})

const data = ref([{name:'帅无敌',age:18}])
const test = ()=>{
  router.push({path:'/b',query:data.value[0]})
}
</script>

<style>

</style>

b.vue

<template>
  <div>B</div>
  {{ $route.query }}
</template>

<script setup lang='ts'>
import {ref,onUnmounted} from "vue"
import { useRoute,useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const obj = ref(route.query)

onUnmounted(()=>{
  obj.value.age = 21 as any
  router.replace({ path: '/a', query:obj.value })
})

</script>

<style>

</style>

可以看到，a.vue中的onBeforeRouteUpdate的to可以正确的获取到query参数。