Clear way to re-use the component of the matched page when language switching causes a navigation to a different locale prefix

[danwithabox]

Describe the feature

I wish to keep page state when a language switcher causes the URL to change.

Currently, out-of-the-box, the URL change causes a component re-render. I would have guessed Vue router's goal of re-using and updating components when possible would apply, since the pages are the same, only the locale have changed. Instead, a console log on onMounted shows that a fresh component is mounted.

Is this intended behaviour? It seems counter-intuitive to me, but I have not found documentation nor issues about.

I tried a quick workaround (in pages/index.ts):

<script setup lang="ts">
definePageMeta({
    key: (route) => route.name.split("___")[0],
});
</script>

This works, since the postfixed pathnames seem to use a ___ separator, e.g.:

index___en-US
index___en-US___default
index___en-GB

With some more digging around, I changed the code to make it less hacky by avoiding the magic string ___:

<script setup lang="ts">
definePageMeta({
    key: (route) => {
        const key: string = useRouteBaseName()(route) ?? route.fullPath;
        return key;
    },
});
</script>

I am definitely not sure that this is the best way to achieve what I want. Could we have a dedicated option for this, or at least an official snippet in the documentation?

Additional information

• [ ] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).
• [X] Check existing discussions and issues.