how to set router.replace not reset scrollbar postion?

[yunxifd]

I want to keep some data in querystring.
The effect is similar as ahooks useUrlState。so i find an alternative for vue vueuse useRouteQuery

vueuse useRouteQuery example

<template>
  <div>Home</div>
  <div style="height: 500px"></div>
  <input v-model="name" />
</template>
<script setup lang="ts">
import { useRouteQuery } from '@vueuse/router';
var name = useRouteQuery('name');
</script>

vue-router replace example

<template>
  <div>Home</div>
  <div style="height: 500px"></div>
  <input v-model="name" />
  <RouterLink to="/about">go to about page</RouterLink>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, watch } from 'vue';
var router = useRouter();
var name = ref('');
watch(
  () => name.value,
  () => {
    router.replace({
      query: {
        name: name.value,
      },
    });
  },
);
</script>

but when input , scrollbar postion reset to top

expect

when input, keep scrollbar position.

[yunxifd]

when i use vueuse useUrlSearchParams hook（which use history.replace ），the url change and scrollbar position keep not change . but when i go to other page and goback the url not i expected

from reply: #1678 (comment)
we should not use history.replay and vue-router together

[posva]

If you are seeing this behavior, it means you have a scrollBehavior() that scrolls up by default. You should probably tweak the behavior to not return the scroll up object in th scenario you want it to stay where it is. You could also add a custom query param or hash like #noscroll to completely avoid scroll behavior: if (to.hash === '#noscroll') return (within scrollBehavior)