Skip to content

Commit

Permalink
feat: support paths in localePath() (#554)
Browse files Browse the repository at this point in the history
Adds support for passing the path of the route as a string parameter
which is syntactic sugar for passing a `{ path: '/foo' }` object.
  • Loading branch information
sugoidesune authored and rchl committed Jan 20, 2020
1 parent fb6a6f9 commit 29a282e
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 5 deletions.
8 changes: 5 additions & 3 deletions docs/basic-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,20 @@ The `vueI18n` option is passed as is to **vue-i18n**, refer to the [doc](https:/

When rendering internal links in your app using `<nuxt-link>`, you need to get proper URLs for the current locale. To do this, **nuxt-i18n** registers a global mixin that provides some helper functions:

* `localePath` – Returns the localized URL for a given page. The first parameter can be either the name of the route or an object for more complex routes. A locale code can be passed as the second parameter to generate a link for a specific language:
* `localePath` – Returns the localized URL for a given page. The first parameter can be either the path or name of the route or an object for more complex routes. A locale code can be passed as the second parameter to generate a link for a specific language:

```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>
```

Note that `localePath` uses 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).
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).

* `switchLocalePath` – Returns a link to the current page in another language:

Expand Down
10 changes: 8 additions & 2 deletions src/plugins/routing.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,15 @@ function localePath (route, locale) {

if (!locale) return

// If route parameters is a string, use it as the route's name
// If route parameter is a string, check if it's a path or name of route.
if (typeof route === 'string') {
route = { name: route }
if (route[0] === '/') {
// If route parameter is a path, create route object with path.
route = { path: route }
} else {
// Else use it as route name.
route = { name: route }
}
}

const localizedRoute = Object.assign({}, route)
Expand Down
1 change: 1 addition & 0 deletions test/module.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,7 @@ describe('basic', () => {
const window = await nuxt.renderAndGetWindow(url('/'))
expect(window.$nuxt.localePath('about')).toBe('/about-us')
expect(window.$nuxt.localePath('about', 'fr')).toBe('/fr/a-propos')
expect(window.$nuxt.localePath('/about-us')).toBe('/about-us')
expect(window.$nuxt.localePath({ path: '/about' })).toBe('/about-us')
expect(window.$nuxt.localePath({ path: '/about/' })).toBe('/about-us')
})
Expand Down

0 comments on commit 29a282e

Please sign in to comment.