diff --git a/packages/vue-i18n-routing/src/compatibles/routing.ts b/packages/vue-i18n-routing/src/compatibles/routing.ts index a77254a..2c6f19d 100644 --- a/packages/vue-i18n-routing/src/compatibles/routing.ts +++ b/packages/vue-i18n-routing/src/compatibles/routing.ts @@ -5,7 +5,7 @@ import { isVue3, isRef, unref, isVue2 } from 'vue-demi' import { DEFAULT_DYNAMIC_PARAMS_KEY } from '../constants' import { getLocale, getLocaleRouteName, getRouteName } from '../utils' -import { getI18nRoutingOptions, resolve } from './utils' +import { getI18nRoutingOptions, resolve, routeToObject } from './utils' import type { RoutingProxy, PrefixableOptions, SwitchLocalePathIntercepter } from './types' import type { Strategies, I18nRoutingOptions } from '../types' @@ -298,23 +298,24 @@ export function switchLocalePath(this: RoutingProxy, locale: Locale): string { const { switchLocalePathIntercepter, dynamicRouteParamsKey } = getI18nRoutingOptions(this.router, this) // prettier-ignore - const { params, ...routeCopy } = isVue3 + const routeValue = isVue3 ? (route as RouteLocationNormalizedLoaded) // for vue-router v4 : isRef(route) // for vue-router v3 ? route.value : route + const routeCopy = routeToObject(routeValue) const langSwitchParams = getLocalizableMetaFromDynamicParams(route, dynamicRouteParamsKey)[locale] || {} // eslint-disable-next-line @typescript-eslint/no-explicit-any const _baseRoute: any = { name, params: { - ...params, + ...routeCopy.params, ...langSwitchParams } } if (isVue2) { - _baseRoute.params[0] = params.pathMatch + _baseRoute.params[0] = routeCopy.params.pathMatch } const baseRoute = assign({}, routeCopy, _baseRoute) diff --git a/packages/vue-i18n-routing/src/compatibles/utils.ts b/packages/vue-i18n-routing/src/compatibles/utils.ts index 905620f..ef2953e 100644 --- a/packages/vue-i18n-routing/src/compatibles/utils.ts +++ b/packages/vue-i18n-routing/src/compatibles/utils.ts @@ -18,7 +18,7 @@ import type { RoutingProxy } from './types' import type { I18nRoutingGlobalOptions } from '../extends/router' import type { Strategies } from '../types' import type { Locale } from '@intlify/vue-i18n-bridge' -import type { VueRouter, Router } from '@intlify/vue-router-bridge' +import type { VueRouter, Router, Route, RouteLocationNormalizedLoaded } from '@intlify/vue-router-bridge' export function getI18nRoutingOptions( router: Router | VueRouter, @@ -58,6 +58,26 @@ function split(str: string, index: number) { return result } +/** + * NOTE: + * Nuxt route uses a proxy with getters for performance reasons (https://github.com/nuxt/nuxt/pull/21957). + * Spreading will result in an empty object, so we make a copy of the route by accessing each getter property by name. + */ +export function routeToObject(route: Route | RouteLocationNormalizedLoaded) { + const { fullPath, query, hash, name, path, params, meta, redirectedFrom, matched } = route + return { + fullPath, + params, + query, + hash, + name, + path, + meta, + matched, + redirectedFrom + } +} + /** * NOTE: * vue-router v4.x `router.resolve` for a non exists path will output a warning.