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 でシングルページアプリケーションを作成す
9
9
<h1 >Hello App!</h1 >
10
10
<p >
11
11
<!-- ナビゲーション向けに 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 >
14
14
</p >
15
15
<!-- route outlet -->
16
16
<router-view ></router-view >
Original file line number Diff line number Diff line change 2
2
3
3
以下の理由のため、vue-router が使用可能になったアプリケーション内部でナビゲーションをハンドリングするために ` v-link ` ディレクティブを使用する必要があります:
4
4
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
+
5
20
- HTML5 history モード と hash モード両方で同じように動作するため、もしいつかモードを切り替えることに決めた場合、また、ルーターが IE9 では hash モードにフォールバックするとき、何も変更する必要はありません。
6
21
7
22
- HTML5 history モードでは、` v-link ` はブラウザがページのリロードするのを試行しないようにするために、クリックイベントに割り込みます。
21
36
#### その他の注意事項
22
37
23
38
- ` 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