Switch locale with a page load instead of the router

[marinaaisa]

Bug/issue #187696128, if applicable:

Summary

The locale selector offers every locale in availableLocales, but a page can offer a locale whose data does not exist. The route guard already falls back to the English page when the data answers 404, but as an in-app navigation that fallback resolves to the location the router is already at, which vue-router rejects as a duplicated navigation [1]. The redirect never happened, leaving the page claiming a locale that was never rendered.

This change resolves the target href with router.resolve [2] and hands it to location.assign [3], so switching locales is a normal page load. The guard then runs as an initial navigation and the English fallback works. Resolving is what makes the href usable outside the router: the locale is a route param, and router paths are relative to the router base, which is the <base> path the site is deployed under. The browser needs the full path instead, so resolve is the piece that fills the locale into the matched route pattern and prefixes the base, something a hand built string from the current path would miss when the site is not served from the domain root.

The UI is unchanged, and the reloaded app reads its locale from the URL, so updating the i18n state by hand is no longer needed.

[1] https://v3.router.vuejs.org/guide/advanced/navigation-failures.html
[2] https://v3.router.vuejs.org/api/#router-resolve
[3] https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

Dependencies

NA

Testing

Steps:

1. Provide setup instructions.
2. Explain in detail how the functionality can be tested.

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

• Added tests
• Ran npm test, and it succeeded
• Updated documentation if necessary

[marinaaisa]

@swift-ci test

[marinaaisa]

@swift-ci test

[mportiz08]

I think the issue with the original fallback PR that we missed is that this should probably be throw false to abort the request instead of doing the next() and return null, which is what was causing the page data to disappear.

We might also need to add something similar to this in the global onError hook for the router to gracefully handle aborted requests without showing the server error page:

router.onError((error) => {
    if (isNavigationFailure(error, NavigationFailureType.aborted)) {
      return;
    }
    ...
}