diff --git a/docs/ja/README.md b/docs/ja/README.md index a43edf928..902912f5b 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -4,6 +4,8 @@ TypeScriptユーザの場合、 `vue-router@3.0+` は `vue@2.5+` を必須とし、逆もまた同様です。 ::: +
Watch a free video course about Vue Router on Vue School
+ Vue Router は [Vue.js](http://vuejs.org) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: - ネストされたルート/ビューマッピング diff --git a/docs/ja/api/README.md b/docs/ja/api/README.md index 657d251fe..720231820 100644 --- a/docs/ja/api/README.md +++ b/docs/ja/api/README.md @@ -16,17 +16,49 @@ sidebar: auto - HTML5 history モードで `base` オプションを使っている時に、 `to` プロパティの URL にそれを含める必要がありません。 -### 外側の要素へのアクティブクラスの適用 +### `v-slot` API (3.1.0 以降) -アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `` を使って外側の要素を描画して、その内側に生の `` タグをラップすることができます。 +`router-link` は[スコープ付きスロット](https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88)を通して低レベルなカスタマイズを提供しています。これは、主にライブラリ作者をターゲットにした高度な API ですが、ほとんどの場合 _NavLink_ などのようなカスタムコンポーネントでも同様に開発者にとっても大変便利です。 -``` html - - /foo +**`v-slot` API を使うとき、それは単一の子を `router-link` に通す必要がります。**そうしない場合は、 `router-linke` は `span` 要素で子をラップします。 + +```html + + {{ route.fullPath }} + +``` + +- `href`: 解決された url。これは、`a` 要素の `href` 属性になります +- `route`: 解決された正規化済みロケーション +- `navigate`: ナビゲーションをトリガーするための関数。`router-link` と同じように、**必要なときに自動的にイベントが起こらないようにします。** +- `isActive`: [アクティブクラス (active class)](#active-class) が適用されるとき、`true` になります。任意のクラスを適用できます。 +- `isExactActive`: `true` if the [正確なアクティブクラス (exact active class)](#exact-active-class) が適用されるとき、`true` になります。 任意のクラスを適用できます。 + +#### 例: アクティブクラスを外部要素へ適用 + +アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、`` 内の要素を `v-slot` を使ってリンクを作成することでラップできます。 + +```html + +
  • + {{ route.fullPath }} +
    • ``` -この時、 `` は実際のリンクになります (そして正しい `href` が得られます)。しかし、アクティブクラスは外側の `
  • ` に適用されます。 +:::tip +`target="_blank"` を `a` 要素に追加する場合、`@click="navigate"` ハンドラを省略しなければなりません。 +::: ## `` Props @@ -112,7 +144,7 @@ sidebar: auto ``` html - + ``` アクティブリンククラスをより説明している例としてこちらの [動作](https://jsfiddle.net/8xrk1n9f/) を確認してください。 @@ -131,6 +163,13 @@ sidebar: auto 完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。 +### aria-current-value + +- 型: `'page' | 'step' | 'location' | 'date' | 'time'` +- デフォルト: `"page"` + + 完全一致によってリンクがアクティブになっているときに `aria-current` の値を設定します。ARIA spec において[aria-current で許可されている値](https://www.w3.org/TR/wai-aria-1.2/#aria-current)の1つでなければなりません。ほとんどの場合、デフォルト`page` が最適です。 + ## `` `` コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです。`` の中で描画されるコンポーネント自身もまた、ネストされたパスに対してコンポーネントを描画するための `` を持つことができます。 @@ -164,8 +203,8 @@ name ではないプロパティも描画されるコンポーネントに渡さ `RouteConfig` の型宣言: - ``` js - declare type RouteConfig = { + ``` ts + interface RouteConfig = { path: string; component?: Component; name?: string; // 名前付きルート用 @@ -313,7 +352,9 @@ router.afterEach((to, from) => {}) ``` js router.push(location, onComplete?, onAbort?) +router.push(location).then(onComplete).catch(onAbort) router.replace(location, onComplete?, onAbort?) +router.replace(location).then(onComplete).catch(onAbort) router.go(n) router.back() router.forward() @@ -462,7 +503,8 @@ router.onError(callback) const router = new VueRouter({ routes: [ // 以下のオブジェクトがルートレコード - { path: '/foo', component: Foo, + { path: '/foo', + component: Foo, children: [ // こちらもルートレコード { path: 'bar', component: Bar } diff --git a/docs/ja/guide/README.md b/docs/ja/guide/README.md index 3baef4c13..0a1317503 100644 --- a/docs/ja/guide/README.md +++ b/docs/ja/guide/README.md @@ -6,6 +6,8 @@ すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。 ::: +
    Watch a free video course about Vue Router on Vue School
    + Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこで描画するかを知らせるだけです。以下が基本的な例です。 ## HTML diff --git a/docs/ja/guide/advanced/data-fetching.md b/docs/ja/guide/advanced/data-fetching.md index 22244af65..e337b4fb1 100644 --- a/docs/ja/guide/advanced/data-fetching.md +++ b/docs/ja/guide/advanced/data-fetching.md @@ -1,5 +1,7 @@ # データ取得 +
    Watch a free video course about Vue Router on Vue School
    + ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールを描画する前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。 - **ナビゲーション後の取得**: ナビゲーションを先に実行し、その後次に入ってくるコンポーネントのライフサイクルフック内でデータを取得します。データ取得中にローディングを表示します。 @@ -17,7 +19,7 @@ ``` html