diff --git a/de/api/components-nuxt.md b/de/api/components-nuxt.md index 81268d3a9..d7ce28642 100644 --- a/de/api/components-nuxt.md +++ b/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 ``, 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 ``, useful to make transitions inside a dynamic page and different route. + - Default: `$route.path` + +There are 3 ways to handle internal `key` prop of ``. + +1. `nuxtChildKey` prop + + ```html + + ``` + +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 ``, 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). diff --git a/en/api/components-nuxt.md b/en/api/components-nuxt.md index 2e094d95e..d7ce28642 100644 --- a/en/api/components-nuxt.md +++ b/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 ``, 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 ``, useful to make transitions inside a dynamic page and different route. + - Default: `$route.path` + +There are 3 ways to handle internal `key` prop of ``. + +1. `nuxtChildKey` prop + + ```html + + ``` + +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 ``, used to render named-view of page component. - Default: `default` diff --git a/es/api/components-nuxt.md b/es/api/components-nuxt.md index 7f1f0a7aa..d7ce28642 100644 --- a/es/api/components-nuxt.md +++ b/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 ``, useful to make transitions inside a dynamic page and different route. + - Default: `$route.path` + +There are 3 ways to handle internal `key` prop of ``. + +1. `nuxtChildKey` prop + + ```html + + ``` + +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 ``, 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). diff --git a/fr/api/components-nuxt.md b/fr/api/components-nuxt.md index cabc9c443..c202554dc 100644 --- a/fr/api/components-nuxt.md +++ b/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 à ``. 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`) : diff --git a/id/api/components-nuxt.md b/id/api/components-nuxt.md index 2bca4fc03..b68614e0c 100644 --- a/id/api/components-nuxt.md +++ b/id/api/components-nuxt.md @@ -11,7 +11,7 @@ description: Menampilkan komponen halaman di dalam layout - nuxtChildKey: `string` - Prop ini di-set ke ``, berguna untuk membuat transisi di dalam halaman yang dinamis dan rute yang berbeda. - - Default: `$route.fullPath` + - Default: `$route.path` Contoh (`layouts/default.vue`): diff --git a/ja/api/components-nuxt.md b/ja/api/components-nuxt.md index 1420f45a5..48a4e06e8 100644 --- a/ja/api/components-nuxt.md +++ b/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 は `` に設定され、動的なページと異なるルートの中で遷移させるのに便利です - - デフォルト: `$route.fullPath` - 例(`layouts/default.vue`): ```html @@ -27,8 +21,40 @@ description: レイアウト内でページコンポーネントを表示しま 実際の例を見たいときは [レイアウトの例](/examples/layouts) を参照してください。 -- 名前:`string` (_Nuxt v2.4.0で導入されました_) - - この prop は `` に設定され、ページコンポーネントの名前付きビューをレンダリングするのに利用されます +**Props**: + +- nuxtChildKey:`string` + - この prop は `` に設定され、動的なページと異なるルートの中で遷移させるのに便利です + - デフォルト: `$route.path` + +`` の `key` prop を操作する方法は3つあります。 + +1. `nuxtChildKey` prop + + ```html + + ``` + +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 は `` に設定され、ページコンポーネントの名前付きビューをレンダリングするのに利用されます。 - デフォルト: `default` 実際の例を見たいときは [名前付きビューの例](/examples/named-views) を参照してください。 diff --git a/ko/api/components-nuxt.md b/ko/api/components-nuxt.md index 101eea775..03f90e700 100644 --- a/ko/api/components-nuxt.md +++ b/ko/api/components-nuxt.md @@ -20,3 +20,41 @@ description: 레이아웃 내부의 페이지 컴포넌트를 보여줍니다. ``` [layouts example](/examples/layouts)에서 예제를 보실 수 있습니다. + +**Props**: + +- nuxtChildKey: `string` + - 이 속성은 ``에 `key`속성으로 설정됩니다. 동적 페이지에서 여러 라우트간의 트랜지션을 만드는 경우 유용합니다. + - 기본값: `$route.path` + +``에 `key`속성을 설정하는 방법은 3가지가 있습니다. + +1. `nuxtChildKey` 속성 + + ```html + + ``` + +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_) + - 이 속성은 ``의 속성으로 설정됩니다. 페이지 컴포넌트의 named-view를 렌더링 하는데 사용됩니다. + - 기본값: `default` + +[named-views example](/examples/named-views)에서 예제를 보실 수 있습니다. diff --git a/zh/api/components-nuxt.md b/zh/api/components-nuxt.md index 8a46dd197..1aec59912 100644 --- a/zh/api/components-nuxt.md +++ b/zh/api/components-nuxt.md @@ -10,7 +10,7 @@ description: 该组件用于在布局中显示页面组件(即非布局内容 **Props**: - nuxtChildKey: `string` - 此prop将设置为``,可用于在动态页面和不同路径内进行转换。 - - 默认: `$route.fullPath` + - 默认: `$route.path` 例如 (`layouts/default.vue`):