9
9
``` js
10
10
const router = new VueRouter ({ ... })
11
11
12
- router .beforeEach ((route , redirect , next ) => {
12
+ router .beforeEach ((to , from , next ) => {
13
13
// ...
14
14
})
15
15
```
@@ -18,18 +18,22 @@ router.beforeEach((route, redirect, next) => {
18
18
19
19
全てのガード関数は 3 つの引数を受け取ります。
20
20
21
- - ` route : Route` : 次にナビゲーションされる対象の [ ルートオブジェクト] ( ../api/route-object.md ) 。
21
+ - ** ` to : Route` ** : 次にナビゲーションされる対象の [ ルートオブジェクト] ( ../api/route-object.md ) 。
22
22
23
- - ` redirect: Function ` : この関数を呼び出すことで現在のナビゲーションを中止してリダイレクト対象先の新しいナビゲーションが始まります 。
23
+ - ** ` from: Route ` ** : ナビゲーションされる前の現在のルートです 。
24
24
25
- - ` next: Function ` : このガードを解決し、パイプラインの次のガードに進みます。もしフックが残っていない場合は、このナビゲーションは ** 確立 ** されます。
25
+ - ** ` next: Function ` ** : フックを ** 解決 ** するためにこの関数を呼ぶ必要があります。この振る舞いは ` next ` に渡される引数に依存します:
26
26
27
- ** もし ` redirect ` も ` next ` も呼ばれない場合、そのナビゲーションはキャンセルされます。 **
27
+ - ** ` next() ` ** : パイプラインの次のフックに移動します。もしフックが残っていない場合は、このナビゲーションは ** 確立 ** されます。
28
28
29
- グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックはより単純で、ナビゲーションに影響を与えることはできません。
29
+ - ** ` next(false) ` ** : 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は(ユーザーが手動で変更した場合でも、戻るボタンの場合でも)、 ` from ` ルートのURLにリセットされます。
30
+
31
+ - ** ` next('/') ` or ` next({ path: '/' }) ` ** : 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。
32
+
33
+ グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは ` next ` 関数を受け取らず、ナビゲーションに影響しません。
30
34
31
35
``` js
32
- router .afterEach (route => {
36
+ router .afterEach (( to , from ) => {
33
37
// ...
34
38
})
35
39
```
@@ -44,7 +48,7 @@ const router = new VueRouter({
44
48
{
45
49
path: ' /foo' ,
46
50
component: Foo,
47
- beforeEnter : (route , redirect , next ) => {
51
+ beforeEnter : (to , from , next ) => {
48
52
// ...
49
53
}
50
54
}
@@ -61,12 +65,12 @@ const router = new VueRouter({
61
65
``` js
62
66
const Foo = {
63
67
template: ` ...` ,
64
- beforeRouteEnter (route , redirect , next ) {
68
+ beforeRouteEnter (to , from , next ) {
65
69
// このコンポーネントをレンダリングするルートが確立する前に呼ばれます。
66
70
// `this` でのこのコンポーネントへのアクセスはできません。
67
71
// なぜならばこのガードが呼び出される時にまだ作られていないからです!
68
72
},
69
- beforeRouteLeave (route , redirect , next ) {
73
+ beforeRouteLeave (to , from , next ) {
70
74
// このコンポーネントをレンダリングするルートが間もなく
71
75
// ナビゲーションから離れていく時に呼ばれます。
72
76
// `this` でのコンポーネントインスタンスへのアクセスができます。
@@ -79,11 +83,11 @@ const Foo = {
79
83
しかしながら、 ` next ` にコールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。
80
84
81
85
``` js
82
- beforeRouteEnter (route , redirect , next ) {
86
+ beforeRouteEnter (to , from , next ) {
83
87
next (vm => {
84
88
// `vm` を通じてコンポーネントインスタンスにアクセス
85
89
})
86
90
}
87
91
```
88
92
89
- ` beforeRouteLeave ` 内で直接 ` this ` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは単純に ` next ` もしくは ` redirect ` を呼ばなければキャンセルされます 。
93
+ ` beforeRouteLeave ` 内で直接 ` this ` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは ` next(false) ` を呼ぶことでキャンセルされます 。
0 commit comments