diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index 90ce3f9a7..c82d8229a 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -23,9 +23,19 @@ - [スクロールの振る舞い](advanced/scroll-behavior.md) - [遅延ローディング](advanced/lazy-loading.md) - API リファレンス - - [router-link](api/router-link.md) - - [router-view](api/router-view.md) - - [ルートオブジェクト](api/route-object.md) - [ルーターコンストラクタオプション](api/options.md) + - [routes](api/options.md#routes) + - [mode](api/options.md#mode) + - [base](api/options.md#base) + - [linkActiveClass](api/options.md#linkactiveclass) + - [linkExactActiveClass](api/options.md#linkexactactiveclass) + - [scrollBehavior](api/options.md#scrollbehavior) + - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) + - [fallback](api/options.md#fallback) - [ルーターインスタンス](api/router-instance.md) + - [Properties](api/router-instance.md#properties) + - [Methods](api/router-instance.md#methods) + - [ルートオブジェクト](api/route-object.md) - [コンポーネント注入](api/component-injections.md) + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) diff --git a/docs/ja/advanced/data-fetching.md b/docs/ja/advanced/data-fetching.md index 8220db158..22244af65 100644 --- a/docs/ja/advanced/data-fetching.md +++ b/docs/ja/advanced/data-fetching.md @@ -1,6 +1,6 @@ # データ取得 -ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールをレンダリングする前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。 +ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールを描画する前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。 - **ナビゲーション後の取得**: ナビゲーションを先に実行し、その後次に入ってくるコンポーネントのライフサイクルフック内でデータを取得します。データ取得中にローディングを表示します。 @@ -10,7 +10,7 @@ ## ナビゲーション後の取得 -このアプローチを取る時は次に来るコンポーネントが即座にナビゲーションされ、レンダリングされます。そして、コンポーネントの `created` フックの中でデータを取得します。この方法ではネットワーク越しにデータを取得している間にローディング状態を表示する機会があります。また、各 view に対して、異なるローディングの対応をすることもできます。 +このアプローチを取る時は次に来るコンポーネントが即座にナビゲーションされ、描画されます。そして、コンポーネントの `created` フックの中でデータを取得します。この方法ではネットワーク越しにデータを取得している間にローディング状態を表示する機会があります。また、各 view に対して、異なるローディングの対応をすることもできます。 `$route.params.id` を元にポストのデータを取得する必要がある `Post` コンポーネントを想定してみましょう。 @@ -55,7 +55,7 @@ export default { fetchData () { this.error = this.post = null this.loading = true - // getPost をあなたのデータ取得用 util や API ラッパーに置き換えてください + // `getPost` をあなたのデータ取得用 util や API ラッパーに置き換えてください getPost(this.$route.params.id, (err, post) => { this.loading = false if (err) { @@ -86,7 +86,7 @@ export default { next(vm => vm.setData(err, post)) }) }, - // コンポーネントが既にレンダリングされている際のルート変更時は + // コンポーネントが既に描画されている際のルート変更時は // ロジックが少し異なります beforeRouteUpdate (to, from, next) { this.post = null diff --git a/docs/ja/advanced/lazy-loading.md b/docs/ja/advanced/lazy-loading.md index a09a3b291..989eae137 100644 --- a/docs/ja/advanced/lazy-loading.md +++ b/docs/ja/advanced/lazy-loading.md @@ -2,43 +2,36 @@ バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。 -Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント) と Webpack の [コード分割機能](https://webpack.js.org/guides/code-splitting-require/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。 +Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント) と webpack の [コード分割機能](https://webpack.js.org/guides/code-splitting-async/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。 -必要なことは非同期のルートコンポーネントを定義するだけです。 +最初に、非同期コンポーネントは Promise (コンポーネント自身解決する必要がある) を返すファクトリ関数として定義できます: ``` js -const Foo = resolve => { - // require.ensure はコード分割のための Webpack の特殊な文法です。 - require.ensure(['./Foo.vue'], () => { - resolve(require('./Foo.vue')) - }) -} +const Foo = () => Promise.resolve({ /* component definition */ }) ``` -コード分割の文法の代替として、 AMD 形式の require もあります。これを使うと次のように簡略されます。 +次に、webpack 2 において [動的 import](https://github.com/tc39/proposal-dynamic-import) 構文を使用して、コード分割ポイントを示すことができます: ``` js -const Foo = resolve => require(['./Foo.vue'], resolve) +import('./Foo.vue') // returns a Promise ``` -特にルート設定を変更する必要はなく、普段のように `Foo` を使用するだけです。 +> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。 + +2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です: ``` js -const router = new VueRouter({ - routes: [ - { path: '/foo', component: Foo } - ] -}) +const Foo = () => import('./Foo.vue') ``` ### 同じチャンク内でのコンポーネントグループ化 -しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 `require.ensure` の第 3 引数にチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-require/#chunkname) を使う必要があります。 +しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 特別なコメント構文 (webpack > 2.4 必須)を使用してチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-async/#chunk-names) を使う必要があります。 ``` js -const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') -const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') -const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') +const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') +const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') +const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') ``` -Webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。つまり、 `require.ensure` に対して明示的に依存関係をリストする必要がありません (したがって空の配列を渡しています)。 +webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。 diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index ea60a1122..e1cc570e3 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -84,7 +84,7 @@ const router = new VueRouter({ const Foo = { template: `...`, beforeRouteEnter (to, from, next) { - // このコンポーネントをレンダリングするルートが確立する前に呼ばれます。 + // このコンポーネントを描画するルートが確立する前に呼ばれます。 // `this` でのこのコンポーネントへのアクセスはできません。 // なぜならばこのガードが呼び出される時にまだ作られていないからです! }, @@ -96,7 +96,7 @@ const Foo = { // `this` でコンポーネントインスタンスにアクセスできます。 }, beforeRouteLeave (to, from, next) { - // このコンポーネントをレンダリングするルートが間もなく + // このコンポーネントを描画するルートが間もなく // ナビゲーションから離れていく時に呼ばれます。 // `this` でのコンポーネントインスタンスへのアクセスができます。 } diff --git a/docs/ja/advanced/scroll-behavior.md b/docs/ja/advanced/scroll-behavior.md index 8c9389ad6..6c1ba7c62 100644 --- a/docs/ja/advanced/scroll-behavior.md +++ b/docs/ja/advanced/scroll-behavior.md @@ -21,6 +21,7 @@ const router = new VueRouter({ - `{ x: number, y: number }` - `{ selector: string }` +- `{ selector: string, offset? : { x: number, y: number }}` (2.6.0 以降においてだけ offset はサポート) もし falsy な値や空のオブジェクトが返った場合、何もスクロールは起きません。 @@ -53,6 +54,7 @@ scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash + // , offset: { x: 0, y: 10 } } } } diff --git a/docs/ja/advanced/transitions.md b/docs/ja/advanced/transitions.md index 8577efd0d..75e9d5b5e 100644 --- a/docs/ja/advanced/transitions.md +++ b/docs/ja/advanced/transitions.md @@ -45,7 +45,7 @@ const Bar = { ``` js // そして親コンポーネントの中で、 -// $route を watch して使用するトランジションを決定します +// `$route` を watch して使用するトランジションを決定します watch: { '$route' (to, from) { const toDepth = to.path.split('/').length diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 2a7b5d34f..5f3e0941b 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -17,6 +17,10 @@ children?: Array; // ネストされたルート用 beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any; + + // 2.6.0+ + caseSensitive?: boolean; // センシティブマッチをケースとして使用するかどうか? (デフォルト: false) + pathToRegexpOptions?: Object; // 正規表現のコンパイルとして path-to-regexp オプション } ``` @@ -85,3 +89,13 @@ - 型: `Function` カスタムクエリ構文解析関数 / 文字列化関数を提供します。デフォルトを上書きします。 + +### fallback + +> 2.6.0+ + +- 型: `boolean` + + ブラウザが `history.pushState` をサポートしないとき、 ルーターが `hash` モードにフォールバックかどうか制御します。デフォルトは `true` + + これを `false` に設定すると、本質的に全ての `router-link` ナビゲーションが IE9 においてフルページリフレッシュになります。これは、サーバサイドレンダリングでハッシュモードの URL が機能しないため、IE9 で動作する必要がある場合に便利です。 diff --git a/docs/ja/api/route-object.md b/docs/ja/api/route-object.md index 7eaf7f4fd..1cbd03985 100644 --- a/docs/ja/api/route-object.md +++ b/docs/ja/api/route-object.md @@ -14,7 +14,7 @@ ``` js router.beforeEach((route, redirect, next) => { - // ここの route はルートオブジェクト + // `to` と `from` は両方ともルートオブジェクト }) ``` @@ -23,7 +23,7 @@ ``` js const router = new VueRouter({ scrollBehavior (to, from, savedPosition) { - // to と from は両方ともルートオブジェクト + // `to` と `from` は両方ともルートオブジェクト } }) ``` diff --git a/docs/ja/api/router-instance.md b/docs/ja/api/router-instance.md index c449b1374..233265068 100644 --- a/docs/ja/api/router-instance.md +++ b/docs/ja/api/router-instance.md @@ -56,6 +56,9 @@ } ``` + - `current` はデフォルトによる現在のルートです(ほとんどの場合、これを変更する必要はありません) + - `append` は `current` ルートにパスを追加できます([`router-link`](https://router.vuejs.org/en/api/router-link.html#props)と同様に) + - **router.addRoutes(routes)** > 2.2.0+ diff --git a/docs/ja/api/router-link.md b/docs/ja/api/router-link.md index be0739482..aa1590447 100644 --- a/docs/ja/api/router-link.md +++ b/docs/ja/api/router-link.md @@ -1,6 +1,6 @@ # `` -`` はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は `to` プロパティを使って指定します。デフォルトでは正しい `href` と共に `` タグとしてレンダリングしますが、 `tag` プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。 +`` はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は `to` プロパティを使って指定します。デフォルトでは正しい `href` と共に `` タグとして描画しますが、 `tag` プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。 下記の理由により `` はハードコードする `` よりも好ましいです。 @@ -23,13 +23,13 @@ ``` html Home - + Home - + Home - + Home @@ -38,7 +38,7 @@ User - + Register ``` @@ -72,11 +72,11 @@ - デフォルト: `"a"` - しばしば `` を `
  • ` などの他のタグとしてレンダリングしたい時があるでしょう。そこで、どのタグとしてレンダリングするかを指定するために `tag` プロパティを使うことができます。そして、依然ナビゲーションのためのクリックイベントを listen します。 + しばしば `` を `
  • ` などの他のタグとして描画したい時があるでしょう。そこで、どのタグとして描画するかを指定するために `tag` プロパティを使うことができます。そして、依然ナビゲーションのためのクリックイベントを listen します。 ``` html foo - +
  • foo
    • ``` @@ -99,7 +99,7 @@ この結果として `` は全てのルートに対してアクティブになります! リンクに対して "正確なマッチモード" を強制するために、 `exact` プロパティを使ってください。 ``` html - + ``` @@ -127,7 +127,7 @@ ### 外側の要素へのアクティブクラスの適用 -アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `` を使って外側の要素レンダリングして、その内側に生の `` タグをラップすることができます。 +アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `` を使って外側の要素を描画して、その内側に生の `` タグをラップすることができます。 ``` html diff --git a/docs/ja/api/router-view.md b/docs/ja/api/router-view.md index d0e71c340..14dcd1395 100644 --- a/docs/ja/api/router-view.md +++ b/docs/ja/api/router-view.md @@ -1,6 +1,6 @@ # `` -`` コンポーネントは与えられたパスに対してマッチしたコンポーネントをレンダリングする関数型コンポーネントです。`` の中でレンダリングされるコンポーネント自身もまた、ネストされたパスに対してコンポーネントをレンダリングするための `` を持つことができます。 +`` コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです。`` の中で描画されるコンポーネント自身もまた、ネストされたパスに対してコンポーネントを描画するための `` を持つことができます。 ### プロパティ @@ -10,11 +10,11 @@ - デフォルト: `"default"` - `` が名前を持つ時、マッチしたルートレコードの `components` オプション内で対応する名前のコンポーネントをレンダリングします。例は [名前付きビュー](../essentials/named-views.md) をご参照ください。 + `` が名前を持つ時、マッチしたルートレコードの `components` オプション内で対応する名前のコンポーネントを描画します。例は [名前付きビュー](../essentials/named-views.md) をご参照ください。 ### 振る舞い -name ではないプロパティもレンダリングされるコンポーネントに渡されますが、ほとんどの場合ルート単位のデータはルートのパラメーターに含まれています。 +name ではないプロパティも描画されるコンポーネントに渡されますが、ほとんどの場合ルート単位のデータはルートのパラメーターに含まれています。 これは普通のコンポーネントなので、 `` と `` と共に動作します。両方を同時に使用する場合は `` を内側にするようにしてください。 diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md index 79243edde..36bfdd706 100644 --- a/docs/ja/essentials/dynamic-matching.md +++ b/docs/ja/essentials/dynamic-matching.md @@ -1,6 +1,6 @@ # 動的ルートマッチング -パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 `User` コンポーネントは全てのユーザーに対してレンダリングされるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。`vue-router` ではパスの中の動的なセグメントを使用して実現できます。 +パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 `User` コンポーネントは全てのユーザーに対して描画されるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。`vue-router` ではパスの中の動的なセグメントを使用して実現できます。 ``` js const User = { @@ -38,7 +38,7 @@ const User = { ### パラメーター変更の検知 -ルートのパラメーターを使う際に特筆すべき点は、ユーザーが `/user/foo` から `/user/bar` へ遷移するときに**同じコンポーネントインスタンスが再利用される**ということです。 両方のルートが同じコンポーネントをレンダリングするため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。**しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。** +ルートのパラメーターを使う際に特筆すべき点は、ユーザーが `/user/foo` から `/user/bar` へ遷移するときに**同じコンポーネントインスタンスが再利用される**ということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。**しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。** 同じコンポーネントでパラメーター変更を検知するためには、 `$route` オブジェクトを watch するだけです。 diff --git a/docs/ja/essentials/getting-started.md b/docs/ja/essentials/getting-started.md index 94648e06d..f3338e493 100644 --- a/docs/ja/essentials/getting-started.md +++ b/docs/ja/essentials/getting-started.md @@ -2,7 +2,7 @@ > ガイド内のコードのサンプルは [ES2015](https://github.com/lukehoban/es6features) を使っています。 -Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこでレンダリングするかを知らせるだけです。以下が基本的な例です。 +Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこで描画するかを知らせるだけです。以下が基本的な例です。 > すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。 @@ -17,12 +17,12 @@ Vue.js と vue-router を使ったシングルページアプリケーション

    - + Go to Foo Go to Bar

    - + ``` @@ -30,7 +30,7 @@ Vue.js と vue-router を使ったシングルページアプリケーション ### JavaScript ``` js -// 0. モジュールシステムを使っている場合 (例: vue-cli 経由で)、Vue と VueRouter をインポートし、Vue.use(VueRouter) を呼び出します。 +// 0. モジュールシステムを使っている場合 (例: vue-cli 経由で)、Vue と VueRouter をインポートし、`Vue.use(VueRouter)` を呼び出します。 // 1. ルートコンポーネントを定義します // 他のファイルからインポートすることもできます @@ -39,7 +39,7 @@ const Bar = { template: '
    bar
    ' } // 2. ルートをいくつか定義します // 各ルートは 1 つのコンポーネントとマッピングされる必要があります。 -// このコンポーネントは実際の Vue.extend()、 +// このコンポーネントは実際の `Vue.extend()`、 // またはコンポーネントオプションのオブジェクトでも構いません。 // ネストされたルートに関しては後で説明します const routes = [ @@ -51,7 +51,7 @@ const routes = [ // 追加のオプションをここで指定できますが、 // この例ではシンプルにしましょう const router = new VueRouter({ - routes // routes: routes の短縮表記 + routes // `routes: routes` の短縮表記 }) // 4. root となるインスタンスを作成してマウントします diff --git a/docs/ja/essentials/history-mode.md b/docs/ja/essentials/history-mode.md index 28c113896..106d83c1d 100644 --- a/docs/ja/essentials/history-mode.md +++ b/docs/ja/essentials/history-mode.md @@ -44,6 +44,34 @@ location / { Node.js/Express では [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback) の利用を検討してください。 +#### Internet Information Services (IIS) +``` + + + + + + + + + + + + + + + + + + + + + + + + +``` + ## 注意 この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。 diff --git a/docs/ja/essentials/named-views.md b/docs/ja/essentials/named-views.md index 82e09aadf..d5f9b1e2c 100644 --- a/docs/ja/essentials/named-views.md +++ b/docs/ja/essentials/named-views.md @@ -8,7 +8,7 @@ ``` -1 つの view は 1 つのコンポーネントを使ってレンダリングされます。したがって、同じルートに対する複数の view には複数のコンポーネントが必須になります。この `components` (s が付いている) オプションに注意してください。 +1 つの view は 1 つのコンポーネントを使って描画されます。したがって、同じルートに対する複数の view には複数のコンポーネントが必須になります。この `components` (s が付いている) オプションに注意してください。 ``` js const router = new VueRouter({ diff --git a/docs/ja/essentials/nested-routes.md b/docs/ja/essentials/nested-routes.md index 18adb5710..22da5c3ab 100644 --- a/docs/ja/essentials/nested-routes.md +++ b/docs/ja/essentials/nested-routes.md @@ -35,7 +35,7 @@ const router = new VueRouter({ }) ``` -ここでの `` はトップレベルのアウトレットです。トップレベルのルートによってマッチしたコンポーネントがレンダリングされます。同様にレンダリングされたコンポーネントもまた自身のネストされた `` を持つことができます。`User` コンポーネントのテンプレート内部に 1 つ追加する例です。 +ここでの `` はトップレベルのアウトレットです。トップレベルのルートによってマッチしたコンポーネントが描画されます。同様に描画されたコンポーネントもまた自身のネストされた `` を持つことができます。`User` コンポーネントのテンプレート内部に 1 つ追加する例です。 ``` js const User = { @@ -48,7 +48,7 @@ const User = { } ``` -このネストされたアウトレットに対してコンポーネントをレンダリングするためには、 `VueRouter` のコンストラクタの設定で `children` オプションを使用する必要があります。 +このネストされたアウトレットに対してコンポーネントを描画するためには、 `VueRouter` のコンストラクタの設定で `children` オプションを使用する必要があります。 ``` js const router = new VueRouter({ @@ -57,13 +57,13 @@ const router = new VueRouter({ children: [ { // /user/:id/profile がマッチした時に - // UserProfile は User の 内部でレンダリングされます + // UserProfile は User の 内部で描画されます path: 'profile', component: UserProfile }, { // /user/:id/posts がマッチした時に - // UserPosts は User の 内部でレンダリングされます + // UserPosts は User の 内部で描画されます path: 'posts', component: UserPosts } @@ -76,7 +76,7 @@ const router = new VueRouter({ `children` オプションを見るとわかる通り、これは `routes` 自身と同じようなルート設定オブジェクトの配列です。したがって、ネストしている view を必要なだけ保持することができます。 -ここまでの点では、上記の設定で `/user/foo` に訪れた時に `User` アウトレット内部で何もレンダリングされません。なぜならば、サブルートにマッチしていないからです。そこに何かレンダリングしたい場合は、空のサブルートパスを設定できます。 +ここまでの点では、上記の設定で `/user/foo` に訪れた時に `User` アウトレット内部で何も描画されません。なぜならば、サブルートにマッチしていないからです。そこに何か描画したい場合は、空のサブルートパスを設定できます。 ``` js const router = new VueRouter({ @@ -85,7 +85,7 @@ const router = new VueRouter({ path: '/user/:id', component: User, children: [ // /user/:id がマッチした時に - // UserHome は User の 内部でレンダリングされます + // UserHome は User の 内部で描画されます { path: '', component: UserHome }, // 他のサブルートも同様に...