Remove sensitive data from url, but keep state on refresh

[FaimMedia]

Consider having clicked a password forgotten url from a mail, with an unique hash.
In example: https://example.com/password-reset/t7Usw3hPpQ (shortened for example)
Since the user will spent some time on the page, thinking and filling in a new password, I want to remove the hash as quickly as possible from the url. The prevents people from typing over the hash, and people copying a sensitive url.

With plain JavaScript I would do something like this:

let hash = location.pathname.split('/')[2];

if (hash) {
	history.replaceState({
		hash,
	}, '', '/password-reset');
	return;
}

hash = history.state.hash;

if (!hash) {
	console.warn('Invalid hash');
	return;
}

console.log('Hash is', hash);
// prints t7Usw3hPpQ

The main advantage of this is, if the user (accidentally) refreshes the page, the hash is preserved.

While I can easily remove the hash from the url using vue-router on mount, after refresh the state from both vue-router and History API do not include the state I provided.

I there currently any functionality to mimic this behavior? Or should I do a feature request so router will somehow preserve the original History API state?
PS: I'm not looking for a solution to save the hash in local or session storage, that seems like overkill to me.

[FaimMedia]

Apparently there is a state property to attach metadata to the History API, so something like this works perfectly:

{
	path: '/password/:hash',
	name: 'password-redirect',
	redirect: (to: RouteLocationGeneric): RouteLocationRaw => ({
		name: 'password',
		state: {
			hash: to.params.hash,
		},
	}),
},
{
	path: '/password',
	name: 'password',
	component: Password,
}

In the Password component, the hash property in the state will be present, even on refresh:

const hash = history.state.hash?.toString();

console.log(hash);