fix: prefix_and_default strategy routing (#2249)

kazupon · web-flow · commit c6ffffc97a88 · 2023-07-20T13:36:32.000+09:00
diff --git a/specs/fixtures/issues/1889/app.vue b/specs/fixtures/issues/1889/app.vue
@@ -3,12 +3,7 @@ const localePath = useLocalePath()
 </script>
 <template>
   <div>
-    <button
-      v-for="locale in $i18n.locales"
-      :id="locale.code"
-      :key="locale.code"
-      @click="$i18n.setLocale(locale.code)"
-    >
+    <button v-for="locale in $i18n.locales" :id="locale.code" :key="locale.code" @click="$i18n.setLocale(locale.code)">
       {{ locale.name }}
     </button>
   </div>
diff --git a/specs/fixtures/issues/2247/app.vue b/specs/fixtures/issues/2247/app.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <nuxt-link id="root" class="link" to="/"> / </nuxt-link>
+      <nuxt-link id="root-en" class="link" to="/en"> /en </nuxt-link>
+
+      <nuxt-link id="about-en" class="link" to="/en/about"> /en/about </nuxt-link>
+      <nuxt-link id="about" class="link" to="/about"> /about </nuxt-link>
+      <nuxt-link id="about-ar" class="link" to="/ar/about"> /ar/about </nuxt-link>
+      <nuxt-link id="example-ar" class="link" to="/ar/example"> /ar/example </nuxt-link>
+
+      <br />
+      <br />
+
+      <code id="route-path">{{ useRoute().path }}</code>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<style>
+.link {
+  padding: 15px;
+}
+</style>
diff --git a/specs/fixtures/issues/2247/i18n/ar-ar.js b/specs/fixtures/issues/2247/i18n/ar-ar.js
@@ -0,0 +1,3 @@
+export default {
+  title: 'مرحبا.. هذه اللغة العربية',
+};
diff --git a/specs/fixtures/issues/2247/i18n/en-en.js b/specs/fixtures/issues/2247/i18n/en-en.js
@@ -0,0 +1,3 @@
+export default {
+  title: 'Hello this is English',
+};
diff --git a/specs/fixtures/issues/2247/i18n/index.js b/specs/fixtures/issues/2247/i18n/index.js
@@ -0,0 +1,4 @@
+import ar from './ar-ar';
+import en from './en-en';
+
+export default { ar, en };
diff --git a/specs/fixtures/issues/2247/layouts/default.vue b/specs/fixtures/issues/2247/layouts/default.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
diff --git a/specs/fixtures/issues/2247/nuxt.config.ts b/specs/fixtures/issues/2247/nuxt.config.ts
@@ -0,0 +1,31 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    baseUrl: 'https://abwaab.com',
+    locales: [
+      {
+        code: 'en',
+        country: '',
+        iso: 'en',
+        lang: 'en',
+        file: 'en-en.js',
+        dir: 'ltr'
+      },
+      {
+        code: 'ar',
+        country: '',
+        iso: 'ar',
+        lang: 'ar',
+        file: 'ar-ar.js',
+        dir: 'rtl'
+      }
+    ],
+
+    strategy: 'prefix_and_default',
+    detectBrowserLanguage: false,
+    defaultLocale: 'ar',
+    lazy: true,
+    langDir: 'i18n/'
+  }
+})
diff --git a/specs/fixtures/issues/2247/package.json b/specs/fixtures/issues/2247/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "nuxt3-test-issues-2247",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}
diff --git a/specs/fixtures/issues/2247/pages/about.vue b/specs/fixtures/issues/2247/pages/about.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    {{ $t('title') }}
+  </div>
+</template>
diff --git a/specs/fixtures/issues/2247/pages/example.vue b/specs/fixtures/issues/2247/pages/example.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    {{ $t('title') }}
+  </div>
+</template>
diff --git a/specs/fixtures/issues/2247/pages/index.vue b/specs/fixtures/issues/2247/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Home Page</div>
+</template>
diff --git a/specs/fixtures/routing_prefix/components/LangSwitcher.vue b/specs/fixtures/routing_prefix/components/LangSwitcher.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useI18n, useSwitchLocalePath } from '#i18n'
+import { useRoute } from '#imports'
 
 const { locales, locale, setLocale } = useI18n()
+const route = useRoute()
 const switchLocalePath = useSwitchLocalePath()
 
 const localesExcludingCurrent = computed(() => {
@@ -39,5 +41,8 @@ const localesExcludingCurrent = computed(() => {
         >Current Locale: <code>{{ locale }}</code></strong
       >:
     </section>
+    <section>
+      <code id="route-path">route: {{ route.path }}</code>
+    </section>
   </div>
 </template>
diff --git a/specs/issues/2247.spec.ts b/specs/issues/2247.spec.ts
@@ -0,0 +1,46 @@
+import { test, expect, describe } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { setup, createPage, url } from '../utils'
+import { getText } from '../helper'
+
+describe('#2247', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL(`../fixtures/issues/2247`, import.meta.url))
+  })
+
+  test('navigate on `prefix_and_default`', async () => {
+    const home = url('/')
+    const page = await createPage()
+    await page.goto(home)
+
+    await page.locator('#root-en').click()
+    expect(await getText(page, '#route-path')).include('/en')
+
+    await page.locator('#root').click()
+    expect(await getText(page, '#route-path')).include('/')
+
+    await page.locator('#about-en').click()
+    expect(await getText(page, '#route-path')).include('/en/about')
+
+    await page.locator('#root').click()
+    expect(await getText(page, '#route-path')).include('/')
+
+    await page.locator('#about').click()
+    expect(await getText(page, '#route-path')).include('/about')
+
+    await page.locator('#about-ar').click()
+    expect(await getText(page, '#route-path')).include('/ar/about')
+
+    await page.locator('#root').click()
+    expect(await getText(page, '#route-path')).include('/')
+
+    await page.locator('#example-ar').click()
+    expect(await getText(page, '#route-path')).include('/ar/example')
+
+    await page.locator('#about-ar').click()
+    expect(await getText(page, '#route-path')).include('/ar/about')
+
+    await page.locator('#root').click()
+    expect(await getText(page, '#route-path')).include('/')
+  })
+})
diff --git a/specs/routing_strategies/prefix.spec.ts b/specs/routing_strategies/prefix.spec.ts
@@ -47,6 +47,7 @@ describe('strategy: prefix', async () => {
 
     // page path
     expect(await getData(page, '#home-use-async-data')).toMatchObject({ aboutPath: '/en/about' })
+    expect(await getText(page, '#route-path')).toEqual('route: /en')
     expect(await page.getAttribute('#lang-switcher-with-nuxt-link a', 'href')).toEqual('/fr')
 
     // current locale
@@ -69,6 +70,7 @@ describe('strategy: prefix', async () => {
 
     // page path
     expect(await getData(page, '#home-use-async-data')).toMatchObject({ aboutPath: '/fr/about' })
+    expect(await getText(page, '#route-path')).toEqual('route: /fr')
     expect(await page.getAttribute('#lang-switcher-with-nuxt-link a', 'href')).toEqual('/en')
 
     // current locale
@@ -108,6 +110,7 @@ describe('strategy: prefix', async () => {
 
     // page path
     expect(await getData(page, '#home-use-async-data')).toMatchObject({ aboutPath: '/fr/about' })
+    expect(await getText(page, '#route-path')).toEqual('route: /fr')
     expect(await page.getAttribute('#lang-switcher-with-nuxt-link a', 'href')).toEqual('/en')
 
     // current locale
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
@@ -290,7 +290,7 @@ export function detectRedirect<Context extends NuxtApp = NuxtApp>(
   routeLocaleGetter: ReturnType<typeof createLocaleFromRouteGetter>,
   nuxtI18nOptions: DeepRequired<NuxtI18nOptions<Context>>
 ): string {
-  const { strategy, defaultLocale, differentDomains } = nuxtI18nOptions
+  const { strategy, differentDomains } = nuxtI18nOptions
   __DEBUG__ && console.log('detectRedirect: targetLocale -> ', targetLocale)
   __DEBUG__ && console.log('detectRedirect: route -> ', route)
 
@@ -302,10 +302,8 @@ export function detectRedirect<Context extends NuxtApp = NuxtApp>(
     !isStaticGenerate &&
     !differentDomains &&
     strategy !== 'no_prefix' &&
-    // skip if already on the new locale unless the strategy is "prefix_and_default" and this is the default
-    // locale, in which case we might still redirect as we prefer unprefixed route in this case.
-    (routeLocaleGetter(route.to) !== targetLocale ||
-      (strategy === 'prefix_and_default' && targetLocale === defaultLocale))
+    strategy !== 'prefix_and_default' &&
+    routeLocaleGetter(route.to) !== targetLocale
   ) {
     const { fullPath } = route.to
     // the current route could be 404 in which case attempt to find matching route using the full path

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ title: 'مرحبا.. هذه اللغة العربية',`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ title: 'Hello this is English',`
	`3`	`+};`