File tree Expand file tree Collapse file tree 2 files changed +17
-4
lines changed Expand file tree Collapse file tree 2 files changed +17
-4
lines changed Original file line number Diff line number Diff line change @@ -9,8 +9,8 @@ Vue.js + vue-router でシングルページアプリケーションを作成す
99 <h1 >Hello App!</h1 >
1010 <p >
1111 <!-- ナビゲーション向けに v-link ディレクティブを使用 -->
12- <a v-link =" /foo" >Go to Foo</a >
13- <a v-link =" /bar" >Go to Bar</a >
12+ <a v-link =" { path: ' /foo' } " >Go to Foo</a >
13+ <a v-link =" { path: ' /bar' } " >Go to Bar</a >
1414 </p >
1515 <!-- route outlet -->
1616 <router-view ></router-view >
Original file line number Diff line number Diff line change 22
33以下の理由のため、vue-router が使用可能になったアプリケーション内部でナビゲーションをハンドリングするために ` v-link ` ディレクティブを使用する必要があります:
44
5+ ` v-link ` は ルーターが使用可能なアプリケーションでユーザーナビゲーションを有効にするためのディレクティブです。内部で ` router.to() ` に渡される JavaScript 式を受け付けます。例えば:
6+
7+ ``` html
8+ <!-- リテラル文字列 -->
9+ <a v-link =" 'home'" >Home</a >
10+
11+ <!-- 上記と同じ -->
12+ <a v-link =" { path: 'home' }" >Home</a >
13+
14+ <!-- named route -->
15+ <a v-link =" { name: 'user', params: { userId: 123 }}" >User</a >
16+ ```
17+
18+ ` v-link ` は以下の理由でハードコードされた ` href ` より良いです:
19+
520- HTML5 history モード と hash モード両方で同じように動作するため、もしいつかモードを切り替えることに決めた場合、また、ルーターが IE9 では hash モードにフォールバックするとき、何も変更する必要はありません。
621
722- HTML5 history モードでは、` v-link ` はブラウザがページのリロードするのを試行しないようにするために、クリックイベントに割り込みます。
2136#### その他の注意事項
2237
2338- ` v-link ` は ` <a> ` 要素で使用するとき、自動的に ` href ` 属性に設定します。
24-
25- - ` v-link ` は[ リテラルディレクティブ] ( http://vuejs.org/guide/directives.html#Literal_Directives ) のため、mustache タグを含むことができます。例: ` v-link="/user/{% raw %}{{user.name}}{% endraw %}" `
You can’t perform that action at this time.
0 commit comments