VueおよびVueルーターを使用した高度なルーティング:リダイレクトとナビゲーションガード
Vue.js のルーティングの基本はすでにカバーされていますが、今日はVueルーターがしなければならない他のいくつかの機能を探りますリダイレクトやナビゲーションガードなどのオファー。
すでに取り上げたその他の高度なVueルータートピックには、ルートメタフィールドおよびネストされたルートが含まれるため、これらを確認してください。 それでは、始めましょう!
設定
これはVueルーターが提供する高度なルーティング機能に関するものなので、基本的なセットアップを行う方法をすでに知っているでしょう。 念のため、必要最低限の設定を次に示します。
# Yarn $ yarn add vue-router # NPM $ npm install vue-router --save
main.js
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Swamp = { template: '<div>Swamp</div>' }; const Gator = { template: '<div>Gator</div>' }; const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp }, { path: '/gator', component: Gator } ] }); const app = new Vue({ router }).$mount('#app');
リダイレクト
VueRouterを使用してリダイレクトを実行する方法はいくつかあります。 リダイレクトにより、目的のターゲットへのルートが変更され、この変更が現在のURLに反映されます。
const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp }, { path: '/gator', component: Gator }, { path: '/croc', redirect: '/gator' } ] });
ユーザーが/croc
に移動すると、代わりに/gator
にリダイレクトされ、アドレスバーのURLは/gator
になります。
関数を使用して動的ルーティングを実行することもできます。
const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp }, { path: '/gator', component: Gator }, { path: '/croc', redirect: to => { return '/gator'; }} ] });
上記のコードでは、引数to
には、ルートのpath
やname
などの情報を含む元のターゲットルートオブジェクトが含まれています。
エイリアス
エイリアスはリダイレクトに似ていますが、ルートが一致したときにURLを更新しません。
const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp, alias: '/bayou' }, { path: '/gator', component: Gator }, { path: '/croc', redirect: to => { return '/gator'; }} ] });
上記の構成では、/swamp
に移動するユーザーは、URLが/swamp
のSwamp
コンポーネントを取得します。 ユーザーが代わりに/bayou
に移動した場合でも、Swamp
コンポーネントは取得されますが、URLは/bayou
のままになります。
ナビゲーションガード
リダイレクトについて説明したので、関連するがより複雑なトピックであるナビゲーションガードについて説明しましょう。 ナビゲーションガードを使用すると、リダイレクトまたはキャンセルを介してvue-router
でのナビゲーションを動的に防ぐことができます。 アプリのユーザーに/admin
を表示する権限がない場合は、キャンセルするか、ユーザーを適切な代替ルートにリダイレクトできます。 これは重要であるため、ユーザーは自分の興味に関係のないコンポーネントにさらされることはありません。
基本的な例として、ユーザーがまだ認証されていない場合は、単純なナビゲーションガードを使用してユーザーをログインページにリダイレクトできます。
const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp, alias: '/bayou' }, { path: '/gator', component: Gator }, { path: '/croc', redirect: to => { return '/gator'; }}, { path: '/login', name: 'login', component: Login } ] }); router.beforeEach((to, from, next) => { if (to.name !== 'login' && !isAuthenticated) { next({ name: 'login' }); } else { next(); } });
ルートごとにガードを定義することもできます。
const router = new VueRouter({ routes: [ { path: '/swamp', component: Swamp, alias: '/bayou' }, { path: '/gator', component: Gator, beforeEnter: (to, from, next) => { console.log(`${from.path} to ${to.path}?`); next(); } }, { path: '/croc', redirect: to => { return '/gator'; }}, { path: '/login', name: 'login', component: Login } ] });
next()を1回だけ呼び出すようにしてください。そうしないと、エラーや誤ったパス解決が発生する可能性があります。
コンポーネント自体も、独自のガードを適用できます。 これが役立つ1つの方法は、ユーザーにナビゲートするつもりかどうかを尋ね、false
をnext()
に渡してナビゲーションをキャンセルすることです。 また、コンポーネントのthis
にアクセスできるため、ルーティングロジックを決定する際にコンポーネントのメソッドとプロパティを使用できます。
const Swamp = { template: '<div>Swamp</div>', beforeRouteEnter(to, from, next) { console.log('Welcome to the swamp!'); next(); }, beforeRouteLeave(to, from, next) { const answer = window.confirm('Are you sure you want to leave?'); if (answer) { next(); } else { next(false); } } };
このコードはブラウザで実行されるため、ユーザーはナビゲーションガードに関係なく、アプリのすべてのコードにアクセスできることに注意してください。 本番アプリケーションで作業するときは、バックエンドで適切な検証と権限チェックを実装することを常に忘れないでください。
まとめ
VueルーターがVue アプリでルーティングを提供する優れたソリューションであることはすでにわかっていますが、本日はVueルーターがサポートするいくつかの高度なユースケースについて説明しました。すぐに使用できます。 いつものように、公式のドキュメントを確認してください。 Transitions を使用してアプリにスパイスを加えたり、 Lazy Loading Routes を使用してパフォーマンスを向上させたりするなど、その他の高度な機能を確認してください。