VueおよびVueルーターを使用した高度なルーティング：リダイレクトとナビゲーションガード

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

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 取得します Swamp URLが /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 を使用してパフォーマンスを向上させたりするなど、その他の高度な機能を確認してください。

getdocs

13036