1

router-linkを条件によって違うページに遷移させたい

現在ログイン機能を作成していまして、
様々なページをログインしないとその専用ページに遷移できないようにしたいです。

(例)イベントを作成するページに移動するにはログインが必要

ログインしてない時は -> ログインページへ
ログインしている時は -> イベント作成ページへ

といった条件によって異なる動きを実装したいです。

方法がわかっていないのでどうすればいいのかわからないです

router-link 条件分岐 で検索しましたが、期待する回答が得られませんでした。

検索するキーワードや参考になるリンクがありましたらご教授いただけると幸いです。

1

1 件の回答 1

2

Vue Router を使い、遷移をするか、遷移を抑制するのかを指定するためには、ナビゲーションガードという機能を用いることが出来ます。

ナビゲーションガード

この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。

パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない ということを覚えておいてください。それらの変更に対応するために $route オブジェクトを監視する、またはコンポーネント内ガード beforeRouteUpdate を使用するかの、どちらかができます。

詳しい使用方法やメソッドの情報は、公式ガイド公式 API リファレンスに載っているので、そちらを読むと良いと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。