fix: redirect from 404 to defaultLocale if there is matching route

Changes the `setLocale` logic to, in case current route is 404, to
try to find a matching one for current locale. This is for situations
when using `prefix` strategy where the root (`/`) route doesn't exist.
We will try to find and redirect to prefixed route matching resolved locale.

Also worked around Nuxt issue (nuxt/nuxt#4491 )
with `redirect` not working when called from a plugin in SPA mode.
Required for the above fix above to be functional in SPA.

Resolves #677
Resolves #491

Author: rchl

docs/es/options-reference.md

@@ -23,8 +23,10 @@ Aquí están todas las opciones disponibles al configurar el módulo y sus valor
   //   - code of ISO 639-1 and code of ISO 3166-1 alpha-2, with a hyphen (e.g. 'en-US')
   locales: [],
 
-  // The app's default locale, URLs for this locale won't have a prefix if
-  // strategy is prefix_except_default
+  // The app's default locale.
+  // When using 'prefix_except_default' strategy, URLs for this locale won't have a prefix.
+  // It's recommended to set this to some locale regardless of chosen strategy, as it will be
+  // used as a locale fallback to use when navigating to a non-existent route.
   defaultLocale: null,
 
   // Separator used to generated routes name for each locale, you shouldn't

docs/es/routing.md

@@ -63,8 +63,8 @@ Con esta estrategia, todas las rutas tendrán un prefijo de configuración local
 
 Esta estrategia combina los comportamientos de ambas estrategias anteriores, lo que significa que obtendrá URL con prefijos para cada idioma, pero las URL para el idioma predeterminado también tendrán una versión sin prefijo.
 
-Para configurar la estrategia, use la opción `strategy`. Asegúrese de tener un `defaultLocale` definido si usa **prefix_except_default**, **prefix_and_default** o la estrategia **no_prefix**.
-
+Para configurar la estrategia, use la opción `strategy`.
+Make sure that you have a `defaultLocale` defined, especially if using **prefix_except_default**, **prefix_and_default** or **no_prefix** strategy. For other strategies it's also recommended to set it as it's gonna be used as a fallback when attempting to redirect from 404 page.
 
 ```js
 // nuxt.config.js

docs/options-reference.md

@@ -36,8 +36,10 @@ Here are all the options available when configuring the module and their default
   //   - code of ISO 639-1 and code of ISO 3166-1 alpha-2, with a hyphen (e.g. 'en-US')
   locales: [],
 
-  // The app's default locale, URLs for this locale won't have a prefix if
-  // strategy is prefix_except_default
+  // The app's default locale.
+  // When using 'prefix_except_default' strategy, URLs for this locale won't have a prefix.
+  // It's recommended to set this to some locale regardless of chosen strategy, as it will be
+  // used as a locale fallback to use when navigating to a non-existent route.
   defaultLocale: null,
 
   // Separator used to generated routes name for each locale, you shouldn't

docs/routing.md

@@ -66,8 +66,8 @@ This strategy combines both previous strategies behaviours, meaning that you wil
 
 ### Configuration
 
-To configure the strategy, use the `strategy` option. Make sure that you have a `defaultLocale` defined if using **prefix_except_default**, **prefix_and_default** or **no_prefix** strategy.
-
+To configure the strategy, use the `strategy` option.
+Make sure that you have a `defaultLocale` defined, especially if using **prefix_except_default**, **prefix_and_default** or **no_prefix** strategy. For other strategies it's also recommended to set it as it's gonna be used as a fallback when attempting to redirect from 404 page.
 
 ```js
 // nuxt.config.js

package.json

@@ -23,6 +23,7 @@
   },
   "scripts": {
     "dev:basic": "nuxt -c ./test/fixture/basic/nuxt.config.js",
+    "dev:basic:generate": "nuxt generate -c ./test/fixture/basic/nuxt.config.js",
     "coverage": "codecov",
     "lint": "eslint --ext .js,.vue,.ts src test types",
     "test": "yarn test:types && yarn test:unit && yarn test:e2e-ssr && yarn test:e2e-browser",

src/templates/middleware.js

@@ -1,37 +1,11 @@
 import middleware from '../middleware'
-import { baseUrl, detectBrowserLanguage, rootRedirect } from './options'
-import { getLocaleFromRoute } from './utils'
-import { resolveBaseUrl } from './utils-common'
 
 middleware.nuxti18n = async (context) => {
-  const { app, route, redirect, isHMR } = context
+  const { app, isHMR } = context
 
   if (isHMR) {
     return
   }
 
-  // Handle root path redirect
-  if (route.path === '/' && rootRedirect) {
-    let statusCode = 302
-    let path = rootRedirect
-
-    if (typeof rootRedirect !== 'string') {
-      statusCode = rootRedirect.statusCode
-      path = rootRedirect.path
-    }
-
-    redirect(statusCode, '/' + path, route.query)
-    return
-  }
-
-  app.i18n.__baseUrl = resolveBaseUrl(baseUrl, context)
-
-  if (detectBrowserLanguage && await app.i18n.__detectBrowserLanguage()) {
-    return
-  }
-
-  const locale = app.i18n.locale || app.i18n.defaultLocale || ''
-  const routeLocale = getLocaleFromRoute(route)
-
-  await app.i18n.setLocale(routeLocale || locale)
+  await app.i18n.__onNavigate()
 }

src/templates/plugin.main.js

@@ -13,6 +13,7 @@ import {
   localeCodes,
   locales,
   onLanguageSwitched,
+  rootRedirect,
   STRATEGIES,
   strategy,
   vueI18n,
@@ -21,7 +22,6 @@ import {
 import {
   getLocaleDomain,
   getLocaleFromRoute,
-  isSameRoute,
   syncVuex,
   validateRouteParams
 } from './utils'
@@ -173,21 +173,105 @@ export default async (context) => {
 
     await syncVuex(store, newLocale, app.i18n.getLocaleMessage(newLocale))
 
-    if (!initialSetup) {
+    const redirectPath = getRedirectPathForLocale(newLocale)
+
+    if (initialSetup) {
+      // Redirect will be delayed until middleware runs as redirecting from plugin does not
+      // work in SPA (https://github.com/nuxt/nuxt.js/issues/4491).
+      app.i18n.__redirect = redirectPath
+    } else {
       app.i18n.onLanguageSwitched(oldLocale, newLocale)
+
+      if (redirectPath) {
+        redirect(redirectPath)
+      }
+    }
+  }
+
+  const getRedirectPathForLocale = locale => {
+    if (!locale || app.i18n.differentDomains || strategy === STRATEGIES.NO_PREFIX) {
+      return
     }
 
-    if (!initialSetup && strategy !== STRATEGIES.NO_PREFIX) {
-      const redirectPath = app.switchLocalePath(newLocale) || app.localePath('index', newLocale)
-      const redirectRoute = app.router.resolve(redirectPath).route
+    // Must retrieve from context as it might have changed since plugin initialization.
+    const { route } = context
+    const routeLocale = getLocaleFromRoute(route)
 
-      // Must retrieve from context as it might have changed since plugin initialization.
-      const { route } = context
+    if (routeLocale === locale) {
+      return
+    }
 
-      if (route && !isSameRoute(route, redirectRoute)) {
-        redirect(redirectPath)
+    // At this point we are left with route that either no or different locale.
+    let redirectPath = app.switchLocalePath(locale)
+
+    if (!redirectPath) {
+      // Could be a 404 route in which case we should attemp to find matching route for given locale.
+      redirectPath = app.localePath(route.path, locale)
+    }
+
+    return redirectPath
+  }
+
+  const doDetectBrowserLanguage = () => {
+    const { alwaysRedirect, fallbackLocale } = detectBrowserLanguage
+
+    let matchedLocale
+
+    if (useCookie && (matchedLocale = getLocaleCookie())) {
+      // Get preferred language from cookie if present and enabled
+    } else if (process.client && typeof navigator !== 'undefined' && navigator.languages) {
+      // Get browser language either from navigator if running on client side, or from the headers
+      matchedLocale = matchBrowserLocale(localeCodes, navigator.languages)
+    } else if (req && typeof req.headers['accept-language'] !== 'undefined') {
+      matchedLocale = matchBrowserLocale(localeCodes, parseAcceptLanguage(req.headers['accept-language']))
+    }
+
+    const finalLocale = matchedLocale || fallbackLocale
+
+    // Handle cookie option to prevent multiple redirections
+    if (finalLocale && (!useCookie || alwaysRedirect || !getLocaleCookie())) {
+      if (finalLocale !== app.i18n.locale) {
+        return finalLocale
+      } else if (useCookie && !getLocaleCookie()) {
+        app.i18n.setLocaleCookie(finalLocale)
       }
     }
+
+    return false
+  }
+
+  // Called by middleware on navigation (also on the initial one).
+  const onNavigate = async () => {
+    const { route } = context
+
+    // Handle root path redirect
+    if (route.path === '/' && rootRedirect) {
+      let statusCode = 302
+      let path = rootRedirect
+
+      if (typeof rootRedirect !== 'string') {
+        statusCode = rootRedirect.statusCode
+        path = rootRedirect.path
+      }
+
+      redirect(statusCode, `/${path}`, route.query)
+      return
+    }
+
+    const storedRedirect = app.i18n.__redirect
+    if (storedRedirect) {
+      app.i18n.__redirect = null
+      redirect(storedRedirect)
+      return
+    }
+
+    app.i18n.__baseUrl = resolveBaseUrl(baseUrl, context)
+
+    const finalLocale =
+      (detectBrowserLanguage && doDetectBrowserLanguage()) ||
+      getLocaleFromRoute(route) || app.i18n.locale || app.i18n.defaultLocale || ''
+
+    await app.i18n.setLocale(finalLocale)
   }
 
   // Set instance options
@@ -198,13 +282,14 @@ export default async (context) => {
   app.i18n.fallbackLocale = vueI18nOptions.fallbackLocale || ''
   app.i18n.locales = locales
   app.i18n.defaultLocale = defaultLocale
-  app.i18n.__baseUrl = resolveBaseUrl(baseUrl, context)
   app.i18n.differentDomains = differentDomains
   app.i18n.beforeLanguageSwitch = beforeLanguageSwitch
   app.i18n.onLanguageSwitched = onLanguageSwitched
   app.i18n.setLocaleCookie = setLocaleCookie
   app.i18n.getLocaleCookie = getLocaleCookie
   app.i18n.setLocale = (locale) => loadAndSetLocale(locale)
+  app.i18n.__baseUrl = resolveBaseUrl(baseUrl, context)
+  app.i18n.__onNavigate = onNavigate
 
   // Inject seo function
   Vue.prototype.$nuxtI18nSeo = nuxtI18nSeo
@@ -220,52 +305,21 @@ export default async (context) => {
     }
   }
 
-  let locale = app.i18n.defaultLocale || ''
+  let finalLocale = app.i18n.defaultLocale || ''
 
   if (vuex && vuex.syncLocale && store && store.state[vuex.moduleName].locale !== '') {
-    locale = store.state[vuex.moduleName].locale
+    finalLocale = store.state[vuex.moduleName].locale
   } else if (app.i18n.differentDomains) {
     const domainLocale = getLocaleDomain(app.i18n, req)
-    locale = domainLocale || locale
+    finalLocale = domainLocale || finalLocale
   } else if (strategy !== STRATEGIES.NO_PREFIX) {
     const routeLocale = getLocaleFromRoute(route)
-    locale = routeLocale || locale
+    finalLocale = routeLocale || finalLocale
   } else if (useCookie) {
-    locale = getLocaleCookie() || locale
-  }
-
-  await loadAndSetLocale(locale, { initialSetup: true })
-
-  app.i18n.__detectBrowserLanguage = async () => {
-    if (detectBrowserLanguage) {
-      const { alwaysRedirect, fallbackLocale } = detectBrowserLanguage
-
-      let matchedLocale
-
-      if (useCookie && (matchedLocale = getLocaleCookie())) {
-        // Get preferred language from cookie if present and enabled
-      } else if (process.client && typeof navigator !== 'undefined' && navigator.languages) {
-        // Get browser language either from navigator if running on client side, or from the headers
-        matchedLocale = matchBrowserLocale(localeCodes, navigator.languages)
-      } else if (req && typeof req.headers['accept-language'] !== 'undefined') {
-        matchedLocale = matchBrowserLocale(localeCodes, parseAcceptLanguage(req.headers['accept-language']))
-      }
-
-      matchedLocale = matchedLocale || fallbackLocale
-
-      // Handle cookie option to prevent multiple redirections
-      if (matchedLocale && (!useCookie || alwaysRedirect || !getLocaleCookie())) {
-        if (matchedLocale !== app.i18n.locale) {
-          await app.i18n.setLocale(matchedLocale)
-          return true
-        } else if (useCookie && !getLocaleCookie()) {
-          app.i18n.setLocaleCookie(matchedLocale)
-        }
-      }
-    }
-
-    return false
+    finalLocale = getLocaleCookie() || finalLocale
   }
 
-  await app.i18n.__detectBrowserLanguage()
+  const detectedBrowserLocale = detectBrowserLanguage && doDetectBrowserLanguage()
+  finalLocale = detectedBrowserLocale || finalLocale
+  await loadAndSetLocale(finalLocale, { initialSetup: true })
 }

src/templates/plugin.routing.js

@@ -131,7 +131,7 @@ function switchLocalePath (locale) {
 }
 
 function getRouteBaseName (givenRoute) {
-  const route = givenRoute || this.route
+  const route = givenRoute !== undefined ? givenRoute : this.route
   if (!route.name) {
     return null
   }

src/templates/utils.js

@@ -70,65 +70,6 @@ export const validateRouteParams = routeParams => {
   })
 }
 
-const trailingSlashRE = /\/?$/
-
-/**
- * Determines if objects are equal.
- *
- * @param {Object} [a={}]
- * @param {Object} [b={}]
- * @return {boolean} True if objects equal, False otherwise.
- */
-function isObjectEqual (a = {}, b = {}) {
-  // handle null value #1566
-  if (!a || !b) {
-    return a === b
-  }
-  const aKeys = Object.keys(a)
-  const bKeys = Object.keys(b)
-  if (aKeys.length !== bKeys.length) {
-    return false
-  }
-  return aKeys.every(key => {
-    const aVal = a[key]
-    const bVal = b[key]
-    // check nested equality
-    if (typeof aVal === 'object' && typeof bVal === 'object') {
-      return isObjectEqual(aVal, bVal)
-    }
-    return String(aVal) === String(bVal)
-  })
-}
-
-/**
- * Determines if two routes are the same.
- *
- * @param {Route} a
- * @param {Route} [b]
- * @return {boolean} True if routes the same, False otherwise.
- */
-export function isSameRoute (a, b) {
-  if (!b) {
-    return false
-  }
-  if (a.path && b.path) {
-    return (
-      a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
-      a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
-    )
-  }
-  if (a.name && b.name) {
-    return (
-      a.name === b.name &&
-      a.hash === b.hash &&
-      isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
-    )
-  }
-  return false
-}
-
 /**
  * Get locale code that corresponds to current hostname
  * @param  {VueI18n} nuxtI18n Instance of VueI18n

test/browser.test.js

@@ -87,6 +87,25 @@ describe(browserString, () => {
     expect(await page.getText('body')).toContain('page: À propos')
   })
 
+  test('changes route and locale with setLocale', async () => {
+    page = await browser.page(url('/'))
+
+    let testData = await page.getTestData()
+    expect(testData.languageSwitchedListeners).toEqual([])
+
+    await page.clickElement('#set-locale-link-fr')
+
+    testData = await page.getTestData()
+    expect(testData.languageSwitchedListeners).toEqual([
+      {
+        storeLocale: 'fr',
+        newLocale: 'fr',
+        oldLocale: 'en'
+      }
+    ])
+    expect(await page.getText('body')).toContain('locale: fr')
+  })
+
   test('onLanguageSwitched listener triggers after locale was changed', async () => {
     page = await browser.page(url('/'))
 
@@ -103,6 +122,7 @@ describe(browserString, () => {
         oldLocale: 'en'
       }
     ])
+    expect(await page.getText('body')).toContain('locale: fr')
   })
 
   test('APIs in app context work after SPA navigation', async () => {
@@ -264,6 +284,41 @@ describe(`${browserString} (SPA with router in hash mode)`, () => {
   })
 })
 
+describe(`${browserString} (alwaysRedirect)`, () => {
+  let nuxt
+  let browser
+
+  beforeAll(async () => {
+    const overrides = {
+      i18n: {
+        defaultLocale: 'en',
+        strategy: 'prefix',
+        detectBrowserLanguage: {
+          useCookie: true,
+          alwaysRedirect: true
+        }
+      }
+    }
+
+    nuxt = (await setup(loadConfig(__dirname, 'basic', overrides, { merge: true }))).nuxt
+    browser = await createDefaultBrowser()
+  })
+
+  afterAll(async () => {
+    if (browser) {
+      await browser.close()
+    }
+    await nuxt.close()
+  })
+
+  // This seems like a wrong behavior with `alwaysRedirect` enabled...
+  test('does not redirect to default locale on navigation', async () => {
+    const page = await browser.page(url('/'))
+    await page.navigate('/fr')
+    expect(await page.getText('body')).toContain('locale: fr')
+  })
+})
+
 describe(`${browserString} (vuex disabled)`, () => {
   let nuxt
   let browser

test/fixture/basic/components/LangSwitcher.vue

@@ -1,10 +1,22 @@
 <template>
-  <div id="lang-switcher">
-    <nuxt-link
-      v-for="(locale, index) in localesExcludingCurrent"
-      :key="index"
-      :exact="true"
-      :to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
+  <div>
+    <strong>Using nuxt-link</strong>:
+    <div id="lang-switcher">
+      <nuxt-link
+        v-for="(locale, index) in localesExcludingCurrent"
+        :key="index"
+        :exact="true"
+        :to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
+    </div>
+    <strong>Using setLocale()</strong>:
+    <div>
+      <a
+        v-for="(locale, index) in localesExcludingCurrent"
+        :id="`set-locale-link-${locale.code}`"
+        :key="`b-${index}`"
+        href="#"
+        @click.prevent="$i18n.setLocale(locale.code)">{{ locale.name }}</a>
+    </div>
   </div>
 </template>
 

test/fixture/basic/pages/posts/_slug.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>{{ $route.params.slug }}</h2>
-    <nuxt-link exact :to="localePath('posts')">index</nuxt-link>
+    <nuxt-link id="post-link" exact :to="localePath('posts')">index</nuxt-link>
   </div>
 </template>
 

test/fixture/basic/pages/posts/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <nuxt-link
+      id="post-link"
       exact
       :to="localePath({
         name: 'posts-slug',

test/module.test.js

@@ -138,20 +138,9 @@ describe('basic', () => {
   })
 
   test('/notlocalized & /fr/fr/notlocalized return 404', async () => {
-    let response
-    try {
-      response = await get('/notlocalized')
-    } catch (error) {
-      response = error
-    }
-    expect(response.statusCode).toBe(404)
-
-    try {
-      response = await get('/fr/fr/notlocalized')
-    } catch (error) {
-      response = error
-    }
-    expect(response.statusCode).toBe(404)
+    expect.assertions(2)
+    await get('/notlocalized').catch(error => expect(error.statusCode).toBe(404))
+    await get('/fr/fr/notlocalized').catch(error => expect(error.statusCode).toBe(404))
   })
 
   test('route specifies options with non-supported locale', async () => {
@@ -168,9 +157,8 @@ describe('basic', () => {
     const getElements = () => {
       const dom = getDom(html)
       title = dom.querySelector('h1')
-      const links = [...dom.querySelectorAll('a')]
-      langSwitcherLink = links[0]
-      link = links[1]
+      langSwitcherLink = dom.querySelector('#lang-switcher a')
+      link = dom.querySelector('#post-link')
     }
 
     test('/posts contains EN text, link to /fr/articles/ & link to /posts/my-post', async () => {
@@ -227,10 +215,10 @@ describe('basic', () => {
   test('navigates to child route with nameless parent and checks path to other locale', async () => {
     const window = await nuxt.renderAndGetWindow(url('/posts'))
 
-    const links = window.document.querySelectorAll('a')
-    expect(links.length).toBe(2)
-    expect(links[0].getAttribute('href')).toEqual('/fr/articles/')
-    expect(links[1].getAttribute('href')).toEqual('/posts/my-post')
+    const langSwitcherLink = window.document.querySelector('#lang-switcher a')
+    const link = window.document.querySelector('#post-link')
+    expect(langSwitcherLink.getAttribute('href')).toEqual('/fr/articles/')
+    expect(link.getAttribute('href')).toEqual('/posts/my-post')
   })
 
   test('navigates to dynamic child route and checks path to other locale', async () => {
@@ -1149,3 +1137,32 @@ describe('no_prefix + detectBrowserLanguage + alwaysRedirect', () => {
     expect(dom.querySelector('#current-locale').textContent).toBe('locale: en')
   })
 })
+
+describe('prefix + detectBrowserLanguage + alwaysRedirect', () => {
+  let nuxt
+
+  beforeAll(async () => {
+    const override = {
+      i18n: {
+        defaultLocale: 'fr',
+        strategy: 'prefix',
+        detectBrowserLanguage: {
+          useCookie: true,
+          alwaysRedirect: true
+        }
+      }
+    }
+
+    nuxt = (await setup(loadConfig(__dirname, 'basic', override, { merge: true }))).nuxt
+  })
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('redirects to defaultLocale on navigating to root (non-existant) route', async () => {
+    const html = await get('/')
+    const dom = getDom(html)
+    expect(dom.querySelector('#current-locale').textContent).toBe('locale: fr')
+  })
+})