feat: add support for using localePath with no route name and path (#727

)

In that case current route is used as a fallback for determined the target.

Resolves #691

docs/basic-usage.md

@@ -49,6 +49,8 @@ When rendering internal links in your app using `<nuxt-link>`, you need to get p
   :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
   {{ category.title }}
 </nuxt-link>
+<!-- It's also allowed to omit 'name' and 'path'. -->
+<nuxt-link :to="localePath({ params: { slug: 'ball' } })">{{ category.title }}</nuxt-link>
 ```
 Note that `localePath` can use the route's unprefixed path, which must start with `'/'` or the route's base name to generate the localized URL. The base name corresponds to the names Nuxt generates when parsing your `pages/` directory, more info in [Nuxt's doc](https://nuxtjs.org/guide/routing).
 

docs/es/basic-usage.md

@@ -41,11 +41,16 @@ Al representar enlaces internos en su aplicación usando `<nuxt-link>`, necesita
 
 ```vue
 <nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link>
+<nuxt-link :to="localePath('/')">{{ $t('home') }}</nuxt-link>
 <nuxt-link :to="localePath('index', 'en')">Homepage in English</nuxt-link>
+<nuxt-link :to="localePath('/app/profile')">Route by path to: {{ $t('Profile') }}</nuxt-link>
+<nuxt-link :to="localePath('app-profile')">Route by name to: {{ $t('Profile') }}</nuxt-link>
 <nuxt-link
   :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
   {{ category.title }}
 </nuxt-link>
+<!-- It's also allowed to omit 'name' and 'path'. -->
+<nuxt-link :to="localePath({ params: { slug: 'ball' } })">{{ category.title }}</nuxt-link>
 ```
 
 Tenga en cuenta que `localePath` utiliza el nombre base de la ruta para generar la URL localizada. El nombre base corresponde a los nombres que Nuxt genera al analizar su directorio `pages/`, más información en [el documento de Nuxt](https://nuxtjs.org/guide/routing).

src/templates/plugin.routing.js

@@ -59,9 +59,13 @@ function localePath (route, locale) {
 
     localizedRoute.path = path
   } else {
+    if (!route.name && !route.path) {
+      localizedRoute.name = this.getRouteBaseName()
+    }
+
     // otherwise resolve route via the route name
     // Build localized route options
-    let name = route.name + (strategy === STRATEGIES.NO_PREFIX ? '' : routesNameSeparator + locale)
+    let name = localizedRoute.name + (strategy === STRATEGIES.NO_PREFIX ? '' : routesNameSeparator + locale)
 
     // Match route without prefix for default locale
     if (locale === defaultLocale && strategy === STRATEGIES.PREFIX_AND_DEFAULT) {

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

@@ -2,6 +2,26 @@
   <div>
     <h2>{{ $route.params.slug }}</h2>
     <nuxt-link id="post-link" exact :to="localePath('posts')">index</nuxt-link>
+    <p>
+      <nuxt-link
+        id="post-link-no-route"
+        exact
+        :to="localePath({
+          params: {
+            slug: 'look-ma-no-route'
+          }
+        })">no route slug (same locale)</nuxt-link>
+    </p>
+    <p>
+      <nuxt-link
+        id="post-link-no-route-fr"
+        exact
+        :to="localePath({
+          params: {
+            slug: 'look-ma-no-route'
+          }
+        }, 'fr')">no route slug (fr locale)</nuxt-link>
+    </p>
   </div>
 </template>
 

test/module.test.js

@@ -222,6 +222,20 @@ describe('basic', () => {
     expect(link.getAttribute('href')).toEqual('/posts/my-post')
   })
 
+  test('localePath with route-less params navigates to same locale route', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/posts/my-post'))
+
+    const link = window.document.querySelector('#post-link-no-route')
+    expect(link.getAttribute('href')).toEqual('/posts/look-ma-no-route')
+  })
+
+  test('localePath with route-less params navigates to different locale route', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/posts/my-post'))
+
+    const link = window.document.querySelector('#post-link-no-route-fr')
+    expect(link.getAttribute('href')).toEqual('/fr/articles/look-ma-no-route')
+  })
+
   test('navigates to dynamic child route and checks path to other locale', async () => {
     const window = await nuxt.renderAndGetWindow(url('/dynamicNested/1'))