Fix duplicated route names with prefix_and_default strategy (fixes nu…

…xt-modules#140)

Fixed by adding a `___default` suffix (customizable) to prefix-less (default locale),
extra routes generated when using `prefix_and_default` strategy. So for example,
with 'en' being default locale, two generated index 'en' routes will have names:
 - index___en
 - index___en___default

Additional changes done to handle extra suffix properly, without breaking existing
behavior. That is, when being on a route without prefix, `localePath` and
`switchLocalePath` will still return paths without prefix.

Sort of unrelated to this change but made `routesNameSeparator` not be exposed
on `app.i18n` as it's neither documented to be exposed there nor it shouldn't be
needed for anything.

docs/options-reference.md

@@ -28,6 +28,10 @@ Here are all the options available when configuring the module and their default
   // need to change this
   routesNameSeparator: '___',
 
+  // Suffix added to generated routes name for default locale if strategy is prefix_and_default,
+  // you shouldn't need to change this
+  defaultLocaleRouteNameSuffix: 'default',
+
   // Routes generation strategy, can be set to one of the following:
   // - 'prefix_except_default': add locale prefix for every locale except default
   // - 'prefix': add locale prefix for every locale

src/helpers/constants.js

@@ -27,6 +27,7 @@ exports.DEFAULT_OPTIONS = {
   locales: [],
   defaultLocale: null,
   routesNameSeparator: '___',
+  defaultLocaleRouteNameSuffix: 'default',
   strategy: STRATEGIES.PREFIX_EXCEPT_DEFAULT,
   lazy: false,
   langDir: null,

src/helpers/routes.js

@@ -8,6 +8,7 @@ exports.makeRoutes = (baseRoutes, {
   locales,
   defaultLocale,
   routesNameSeparator,
+  defaultLocaleRouteNameSuffix,
   strategy,
   parsePages,
   pages,
@@ -92,7 +93,8 @@ exports.makeRoutes = (baseRoutes, {
       )
 
       if (locale === defaultLocale && strategy === STRATEGIES.PREFIX_AND_DEFAULT) {
-        routes.push({ ...localizedRoute, path })
+        const nameDefault = localizedRoute.name + routesNameSeparator + defaultLocaleRouteNameSuffix
+        routes.push({ ...localizedRoute, path, name: nameDefault })
       }
 
       if (shouldAddPrefix) {

src/helpers/utils.js

@@ -66,15 +66,17 @@ exports.getPageOptions = (route, pages, locales, pagesDir) => {
  * - Otherwise, fall back to using the routes'path
  * @param  {Object} route               Route
  * @param  {String} routesNameSeparator Separator used to add locale suffixes in routes names
+ * @param  {String} defaultLocaleRouteNameSuffix Suffix added to default locale routes names
  * @param  {Array}  locales             Locales list from nuxt config
  * @return {String}                     Locale code found if any
  */
-exports.getLocaleFromRoute = (route = {}, routesNameSeparator = '', locales = []) => {
+exports.getLocaleFromRoute = (route = {}, routesNameSeparator = '', defaultLocaleRouteNameSuffix = '', locales = []) => {
   const codes = getLocaleCodes(locales)
   const localesPattern = `(${codes.join('|')})`
+  const defaultSuffixPattern = `(?:${routesNameSeparator}${defaultLocaleRouteNameSuffix})?`
   // Extract from route name
   if (route.name) {
-    const regexp = new RegExp(`${routesNameSeparator}${localesPattern}$`, 'i')
+    const regexp = new RegExp(`${routesNameSeparator}${localesPattern}${defaultSuffixPattern}$`, 'i')
     const matches = route.name.match(regexp)
     if (matches && matches.length > 1) {
       return matches[1]

src/plugins/main.js

@@ -54,7 +54,6 @@ export default async ({ app, route, store, req }) => {
   app.i18n.defaultLocale = '<%= options.defaultLocale %>'
   app.i18n.differentDomains = <%= options.differentDomains %>
   app.i18n.forwardedHost = <%= options.forwardedHost %>
-  app.i18n.routesNameSeparator = '<%= options.routesNameSeparator %>'
   app.i18n.beforeLanguageSwitch = <%= options.beforeLanguageSwitch %>
   app.i18n.onLanguageSwitched = <%= options.onLanguageSwitched %>
   // Extension of Vue
@@ -77,7 +76,10 @@ export default async ({ app, route, store, req }) => {
     const domainLocale = getLocaleDomain()
     locale = domainLocale ? domainLocale : locale
   } else {
-    const routeLocale = getLocaleFromRoute(route, app.i18n.routesNameSeparator, app.i18n.locales)
+    const routesNameSeparator = '<%= options.routesNameSeparator %>'
+    const defaultLocaleRouteNameSuffix = '<%= options.defaultLocaleRouteNameSuffix %>'
+
+    const routeLocale = getLocaleFromRoute(route, routesNameSeparator, defaultLocaleRouteNameSuffix, app.i18n.locales)
     locale = routeLocale ? routeLocale : locale
   }
 

src/plugins/routing.js

@@ -1,8 +1,14 @@
 import './middleware';
 import Vue from 'vue'
 
+const routesNameSeparator = '<%= options.routesNameSeparator %>'
 
 function localePathFactory (i18nPath, routerPath) {
+  const STRATEGIES = <%= JSON.stringify(options.STRATEGIES) %>
+  const STRATEGY = '<%= options.strategy %>'
+  const defaultLocale = '<%= options.defaultLocale %>'
+  const defaultLocaleRouteNameSuffix = '<%= options.defaultLocaleRouteNameSuffix %>'
+
   return function localePath (route, locale) {
     // Abort if no route or no locale
     if (!route) return
@@ -15,8 +21,13 @@ function localePathFactory (i18nPath, routerPath) {
     }
 
     // Build localized route options
-    const routesNameSeparator = '<%= options.routesNameSeparator %>'
-    const name = route.name + routesNameSeparator + locale
+    let name = route.name + routesNameSeparator + locale
+
+    // Match route without prefix for default locale
+    if (locale === defaultLocale && STRATEGY === STRATEGIES.PREFIX_AND_DEFAULT) {
+      name += routesNameSeparator + defaultLocaleRouteNameSuffix
+    }
+
     const localizedRoute = Object.assign({}, route, { name })
 
     // Resolve localized route
@@ -36,9 +47,10 @@ function localePathFactory (i18nPath, routerPath) {
 
 
 function switchLocalePathFactory (i18nPath) {
+  const LOCALE_DOMAIN_KEY = '<%= options.LOCALE_DOMAIN_KEY %>'
+  const LOCALE_CODE_KEY = '<%= options.LOCALE_CODE_KEY %>'
+
   return function switchLocalePath (locale) {
-    const LOCALE_DOMAIN_KEY = '<%= options.LOCALE_DOMAIN_KEY %>'
-    const LOCALE_CODE_KEY = '<%= options.LOCALE_CODE_KEY %>'
     const name = this.getRouteBaseName()
     if (!name) {
       return ''
@@ -79,7 +91,6 @@ function getRouteBaseNameFactory (contextRoute) {
   }
 
   return function getRouteBaseName (route) {
-    const routesNameSeparator = '<%= options.routesNameSeparator %>'
     route = routeGetter.call(this, route)
     if (!route.name) {
       return null

src/templates/middleware.js

@@ -18,6 +18,7 @@ middleware['i18n'] = async ({ app, req, res, route, store, redirect, isHMR }) =>
   const getLocaleCodes = <%= options.getLocaleCodes %>
   const getLocaleFromRoute = <%= options.getLocaleFromRoute %>
   const routesNameSeparator = '<%= options.routesNameSeparator %>'
+  const defaultLocaleRouteNameSuffix = '<%= options.defaultLocaleRouteNameSuffix %>'
   const locales = getLocaleCodes(<%= JSON.stringify(options.locales) %>)
   const syncVuex = <%= options.syncVuex %>
 
@@ -33,7 +34,7 @@ middleware['i18n'] = async ({ app, req, res, route, store, redirect, isHMR }) =>
 
   // Handle browser language detection
   const detectBrowserLanguage = <%= JSON.stringify(options.detectBrowserLanguage) %>
-  const routeLocale = getLocaleFromRoute(route, routesNameSeparator, locales)
+  const routeLocale = getLocaleFromRoute(route, routesNameSeparator, defaultLocaleRouteNameSuffix, locales)
 
   const getCookie = () => {
     if (isSpa) {