99``` js
1010const router = new VueRouter ({ ... })
1111
12- router .beforeEach ((route , redirect , next ) => {
12+ router .beforeEach ((to , from , next ) => {
1313 // ...
1414})
1515```
@@ -18,18 +18,22 @@ router.beforeEach((route, redirect, next) => {
1818
1919全てのガード関数は 3 つの引数を受け取ります。
2020
21- - ` route : Route` : 次にナビゲーションされる対象の [ ルートオブジェクト] ( ../api/route-object.md ) 。
21+ - ** ` to : Route` ** : 次にナビゲーションされる対象の [ ルートオブジェクト] ( ../api/route-object.md ) 。
2222
23- - ` redirect: Function ` : この関数を呼び出すことで現在のナビゲーションを中止してリダイレクト対象先の新しいナビゲーションが始まります 。
23+ - ** ` from: Route ` ** : ナビゲーションされる前の現在のルートです 。
2424
25- - ` next: Function ` : このガードを解決し、パイプラインの次のガードに進みます。もしフックが残っていない場合は、このナビゲーションは ** 確立 ** されます。
25+ - ** ` next: Function ` ** : フックを ** 解決 ** するためにこの関数を呼ぶ必要があります。この振る舞いは ` next ` に渡される引数に依存します:
2626
27- ** もし ` redirect ` も ` next ` も呼ばれない場合、そのナビゲーションはキャンセルされます。 **
27+ - ** ` next() ` ** : パイプラインの次のフックに移動します。もしフックが残っていない場合は、このナビゲーションは ** 確立 ** されます。
2828
29- グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックはより単純で、ナビゲーションに影響を与えることはできません。
29+ - ** ` next(false) ` ** : 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は(ユーザーが手動で変更した場合でも、戻るボタンの場合でも)、 ` from ` ルートのURLにリセットされます。
30+
31+ - ** ` next('/') ` or ` next({ path: '/' }) ` ** : 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。
32+
33+ グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは ` next ` 関数を受け取らず、ナビゲーションに影響しません。
3034
3135``` js
32- router .afterEach (route => {
36+ router .afterEach (( to , from ) => {
3337 // ...
3438})
3539```
@@ -44,7 +48,7 @@ const router = new VueRouter({
4448 {
4549 path: ' /foo' ,
4650 component: Foo,
47- beforeEnter : (route , redirect , next ) => {
51+ beforeEnter : (to , from , next ) => {
4852 // ...
4953 }
5054 }
@@ -61,12 +65,12 @@ const router = new VueRouter({
6165``` js
6266const Foo = {
6367 template: ` ...` ,
64- beforeRouteEnter (route , redirect , next ) {
68+ beforeRouteEnter (to , from , next ) {
6569 // このコンポーネントをレンダリングするルートが確立する前に呼ばれます。
6670 // `this` でのこのコンポーネントへのアクセスはできません。
6771 // なぜならばこのガードが呼び出される時にまだ作られていないからです!
6872 },
69- beforeRouteLeave (route , redirect , next ) {
73+ beforeRouteLeave (to , from , next ) {
7074 // このコンポーネントをレンダリングするルートが間もなく
7175 // ナビゲーションから離れていく時に呼ばれます。
7276 // `this` でのコンポーネントインスタンスへのアクセスができます。
@@ -79,11 +83,11 @@ const Foo = {
7983しかしながら、 ` next ` にコールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。
8084
8185``` js
82- beforeRouteEnter (route , redirect , next ) {
86+ beforeRouteEnter (to , from , next ) {
8387 next (vm => {
8488 // `vm` を通じてコンポーネントインスタンスにアクセス
8589 })
8690}
8791```
8892
89- ` beforeRouteLeave ` 内で直接 ` this ` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは単純に ` next ` もしくは ` redirect ` を呼ばなければキャンセルされます 。
93+ ` beforeRouteLeave ` 内で直接 ` this ` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは ` next(false) ` を呼ぶことでキャンセルされます 。
0 commit comments