こんにちは、@SatohJohnです。Vue.js人気ですね。導入して良かったです。今回は実際に実務で使った際に覚えたVue-Routerのナビゲーションガード(before)について書きます。書いてもわかりにくかったので、今回「許可のないidでは対象のページにアクセスさせず、failページに飛ばす。」という課題を考えました。idが直打ちなのかよとかのツッコミは入れないでください。3.0.1Vue-Routerのモードはhashを想定しています。Vue-routerVue-RouterはVue.jsでSPAを作る際につかいます。ナビゲーションガード画面にルーティングされる前にパラメータのバリデーションをして、アクセスのガードできます。list[0];})());初回のページ読み込み時に実行される順番としては1→2→3です。現状何もガードを書けていないので/#/satohでも/#/johnでもTestComponentの画面にたどり着けます。それではガードを書いてみます。グローバルでガードするnextを呼ぶとtoのコンポーネントに遷移します。ここで、idが定義されていないことを考慮しなきゃいけないのは厳しい。(この例だと見なければ無限ループになる。他にコンポーネントが増えたときに。ルート単位でガードする書き方は1.と変わりません。ここに来るときのtoはTestComponentに対するrouteオブジェクトになるためidが無いときというのを気にしなくても良いかもしれません。propsで指定しているのにparamsを見ているのもどうなんだろうという気がします。routerの定義でロジックを書きたくは無い気がしています。}},3.component単位でガードする書き方はやはり1と変わりませんが、2と同じようにcomponentが特定されているのでidだけをみてよいと思います。2と同じようにparamsみることになります。},しかし、propを参照できるように変更します。},できたかと思いますが、しかし、これはまだガードが完全ではありません。初回アクセス時のみのガードしかできていないのです。/#/satohjohnにアクセスした時ページが表示されていますが、これを/#/satohに変更してみると、通ってしまいます。eventに対して、2と3が動かないためです。changeの際にガードする。この問題にはコンポーネントに対するbeforeRouteUpdateを利用します。beforeRouteUpdateはコンポーネントが再利用される際に呼ばれます。逆に言えば初回には呼ばれません。シグネチャは今までのものと同じではありますが、thisパラメータを利用し、コンポーネントの値を取得することができます。このタイミングでは、遷移する前のidしか取れないので、to.paramsから取ります。},これによってbeforeRouteUpdateで弾かれるようになります。これでsatohjohnさんしかTestComponentにアクセスすることができなくなりました!その他4の解決方法$routeオブジェクトをwatchするという手があります。こちらの場合はnextがパラメータに渡ってこないため、$router.pushする必要があります。this.idが更新されているのでto.paramsを見なくても良いという利点があります。},まとめVue-Routerのガードを使ってみました。beforeRouteUpdateあたりは知らずにいるとハマるポイントだと思います。今回関係はないんですが、せっかくなのでparcelで作ってみました。