Add/fix information on nuxtChildKey (#1331)

* Fix extra space in package.json

* all: Add additional information for nuxtChildKey

Please refer to the following pull request in nuxt.js.

nuxt/nuxt#5516

Author: Jun

de/api/components-nuxt.md

@@ -7,11 +7,6 @@ description: Display the page components inside a layout.
 
 > This component is used only in [layouts](/guide/views#layouts) to display the page components.
 
-**Props**:
-- nuxtChildKey: `string`
-  - This prop will be set to `<router-view/>`, useful to make transitions inside a dynamic page and different route.
-  - Default: `$route.fullPath`
-
 Example (`layouts/default.vue`):
 
 ```html
@@ -25,3 +20,41 @@ Example (`layouts/default.vue`):
 ```
 
 To see an example, take a look at the [layouts example](/examples/layouts).
+
+**Props**:
+
+- nuxtChildKey: `string`
+  - This prop will be set to `<router-view/>`, useful to make transitions inside a dynamic page and different route.
+  - Default: `$route.path`
+
+There are 3 ways to handle internal `key` prop of `<router-view/>`.
+
+1. `nuxtChildKey` prop
+
+  ```html
+  <template>
+     <div>
+       <nuxt :nuxt-child-key="someKey"/>
+     </div>
+  </template>
+  ```
+
+2. `key` option in page components: `string` or `function`
+
+  ```js
+  export default {
+     key(route) {
+       return route.fullPath
+     }
+  }
+  ```
+
+3. `watchQuery` option in page components: `boolean` or `string[]`
+
+  Queries specified in [watchQuery](/api/pages-watchquery) option will be considered on building the key. If `watchQuery` is `true`, `fullPath` is used.
+
+- name: `string` (_introduced with Nuxt v2.4.0_)
+  - This prop will be set to `<router-view/>`, used to render named-view of page component.
+  - Default: `default`
+
+To see an example, take a look at the [named-views example](/examples/named-views).

en/api/components-nuxt.md

@@ -7,12 +7,6 @@ description: Display the page components inside a layout.
 
 > This component is used only in [layouts](/guide/views#layouts) to display the page components.
 
-**Props**:
-
-- nuxtChildKey: `string`
-  - This prop will be set to `<router-view/>`, useful to make transitions inside a dynamic page and different route.
-  - Default: `$route.fullPath`
-
 Example (`layouts/default.vue`):
 
 ```html
@@ -27,6 +21,38 @@ Example (`layouts/default.vue`):
 
 To see an example, take a look at the [layouts example](/examples/layouts).
 
+**Props**:
+
+- nuxtChildKey: `string`
+  - This prop will be set to `<router-view/>`, useful to make transitions inside a dynamic page and different route.
+  - Default: `$route.path`
+
+There are 3 ways to handle internal `key` prop of `<router-view/>`.
+
+1. `nuxtChildKey` prop
+
+  ```html
+  <template>
+     <div>
+       <nuxt :nuxt-child-key="someKey"/>
+     </div>
+  </template>
+  ```
+
+2. `key` option in page components: `string` or `function`
+
+  ```js
+  export default {
+     key(route) {
+       return route.fullPath
+     }
+  }
+  ```
+
+3. `watchQuery` option in page components: `boolean` or `string[]`
+
+  Queries specified in [watchQuery](/api/pages-watchquery) option will be considered on building the key. If `watchQuery` is `true`, `fullPath` is used.
+
 - name: `string` (_introduced with Nuxt v2.4.0_)
   - This prop will be set to `<router-view/>`, used to render named-view of page component.
   - Default: `default`

es/api/components-nuxt.md

@@ -20,3 +20,41 @@ Example (`layouts/default.vue`):
 ```
 
 To see an example, take a look at the [layouts example](/examples/layouts).
+
+**Props**:
+
+- nuxtChildKey: `string`
+  - This prop will be set to `<router-view/>`, useful to make transitions inside a dynamic page and different route.
+  - Default: `$route.path`
+
+There are 3 ways to handle internal `key` prop of `<router-view/>`.
+
+1. `nuxtChildKey` prop
+
+  ```html
+  <template>
+     <div>
+       <nuxt :nuxt-child-key="someKey"/>
+     </div>
+  </template>
+  ```
+
+2. `key` option in page components: `string` or `function`
+
+  ```js
+  export default {
+     key(route) {
+       return route.fullPath
+     }
+  }
+  ```
+
+3. `watchQuery` option in page components: `boolean` or `string[]`
+
+  Queries specified in [watchQuery](/api/pages-watchquery) option will be considered on building the key. If `watchQuery` is `true`, `fullPath` is used.
+
+- name: `string` (_introduced with Nuxt v2.4.0_)
+  - This prop will be set to `<router-view/>`, used to render named-view of page component.
+  - Default: `default`
+
+To see an example, take a look at the [named-views example](/examples/named-views).

fr/api/components-nuxt.md

@@ -10,7 +10,7 @@ description: Affiche un composant de page à l'intérieur d'une mise en page.
 **Props** :
 - nuxtChildKey : `string`
   - Cette prop va être appliquée à `<router-view/>`. Utile pour faire des transitions à l'intérieur d'une page dynamique et d'une route différente.
-  - par défaut : `$route.fullPath`
+  - par défaut : `$route.path`
 
 Exemple (`layouts/default.vue`) :
 

id/api/components-nuxt.md

@@ -11,7 +11,7 @@ description: Menampilkan komponen halaman di dalam layout
 
 - nuxtChildKey: `string`
     - Prop ini di-set ke `<router-view/>`, berguna untuk membuat transisi di dalam halaman yang dinamis dan rute yang berbeda.
-    - Default: `$route.fullPath`
+    - Default: `$route.path`
 
 Contoh (`layouts/default.vue`):
 

ja/api/components-nuxt.md

@@ -7,12 +7,6 @@ description: レイアウト内でページコンポーネントを表示しま
 
 > このコンポーネントは [レイアウト](/guide/views#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88) 内でのみ、ページコンポーネントを表示するために使われます。
 
-**Props**:
-
-- nuxt 子キー：`string`
-  - この prop は `<router-view/>` に設定され、動的なページと異なるルートの中で遷移させるのに便利です
-  - デフォルト: `$route.fullPath`
-
 例（`layouts/default.vue`）:
 
 ```html
@@ -27,8 +21,40 @@ description: レイアウト内でページコンポーネントを表示しま
 
 実際の例を見たいときは [レイアウトの例](/examples/layouts) を参照してください。
 
-- 名前：`string` (_Nuxt v2.4.0で導入されました_)
-  - この prop は `<router-view/>` に設定され、ページコンポーネントの名前付きビューをレンダリングするのに利用されます
+**Props**:
+
+- nuxtChildKey：`string`
+  - この prop は `<router-view/>` に設定され、動的なページと異なるルートの中で遷移させるのに便利です
+  - デフォルト: `$route.path`
+
+`<router-view/>` の `key` prop を操作する方法は3つあります。
+
+1. `nuxtChildKey` prop
+
+  ```html
+  <template>
+     <div>
+       <nuxt :nuxt-child-key="someKey"/>
+     </div>
+  </template>
+  ```
+
+2. 各ページコンポーネントの `key` オプション: `string` or `function`
+
+  ```js
+  export default {
+     key(route) {
+       return route.fullPath
+     }
+  }
+  ```
+
+3. 各ページコンポーネントの `watchQuery` オプション: `boolean` or `string[]`
+
+  [watchQuery](/api/pages-watchquery) に設定されたクエリはキーを生成するとき考慮されます。 `watchQuery` が `true` の場合は `fullPath` が使われます。
+
+- name：`string` (_Nuxt v2.4.0で導入されました_)
+  - この prop は `<router-view/>` に設定され、ページコンポーネントの名前付きビューをレンダリングするのに利用されます。
   - デフォルト: `default`
 
 実際の例を見たいときは [名前付きビューの例](/examples/named-views) を参照してください。

ko/api/components-nuxt.md

@@ -20,3 +20,41 @@ description: 레이아웃 내부의 페이지 컴포넌트를 보여줍니다.
 ```
 
 [layouts example](/examples/layouts)에서 예제를 보실 수 있습니다.
+
+**Props**:
+
+- nuxtChildKey: `string`
+  - 이 속성은 `<router-view/>`에 `key`속성으로 설정됩니다. 동적 페이지에서 여러 라우트간의 트랜지션을 만드는 경우 유용합니다.
+  - 기본값: `$route.path`
+
+`<router-view/>`에 `key`속성을 설정하는 방법은 3가지가 있습니다.
+
+1. `nuxtChildKey` 속성
+
+  ```html
+  <template>
+     <div>
+       <nuxt :nuxt-child-key="someKey"/>
+     </div>
+  </template>
+  ```
+
+2. 각 페이지 컴포넌트의 `key` 옵션: `string` or `function`
+
+  ```js
+  export default {
+     key(route) {
+       return route.fullPath
+     }
+  }
+  ```
+
+3. 각 페이지 컴포넌트의 `watchQuery` 옵션: `boolean` or `string[]`
+
+  [watchQuery](/api/pages-watchquery) 옵션에 설정한 쿼리는 키를 생성할 때 고려됩니다. 만약 `watchQuery`가 `true`라면 `fullPath`를 사용하게 됩니다.
+
+- name: `string` (_introduced with Nuxt v2.4.0_)
+  - 이 속성은 `<router-view/>`의 속성으로 설정됩니다. 페이지 컴포넌트의 named-view를 렌더링 하는데 사용됩니다.
+  - 기본값: `default`
+
+[named-views example](/examples/named-views)에서 예제를 보실 수 있습니다.

zh/api/components-nuxt.md

@@ -10,7 +10,7 @@ description: 该组件用于在布局中显示页面组件（即非布局内容
 **Props**:
 - nuxtChildKey: `string`
   - 此prop将设置为`<router-view />`，可用于在动态页面和不同路径内进行转换。
-  - 默认: `$route.fullPath`
+  - 默认: `$route.path`
 
 例如 (`layouts/default.vue`)：