質問: router-linkを条件によって違うページに遷移させたい 現在ログイン機能を作成していまして、 様々なページをログインしないとその専用ページに遷移できないようにしたいです。 (例)イベントを作成するページに移動するにはログインが必要 ログインしてない時は -> ログインページへ ログインしている時は -> イベント作成ページへ といった条件によって異なる動きを実装したいです。 方法がわかっていないのでどうすればいいのかわからないです router-link 条件分岐 で検索しましたが、期待する回答が得られませんでした。 検索するキーワードや参考になるリンクがありましたらご教授いただけると幸いです。
回答: Vue Router を使い、遷移をするか、遷移を抑制するのかを指定するためには、**ナビゲーションガード**という機能を用いることが出来ます。 > > ナビゲーションガード > ========================================================================================================================================================================== > > > この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 > > > **パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために `$route` オブジェクトを監視する、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます。 > > > 詳しい使用方法やメソッドの情報は、公式ガイドや公式 API リファレンスに載っているので、そちらを読むと良いと思います。