# 動的ルートマッチング

Watch a free video course about Vue Router on Vue School

パターンを使って同じコンポーネントにルートをマップする必要がしばしばあるでしょう。例えば、 User コンポーネントは全てのユーザーに対して描画されるべきであるが、それぞれ異なるユーザー ID を持つ場合などです。vue-router ではパスの中の動的なセグメントを使用して実現できます。

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // コロンで始まる動的セグメント
    { path: '/user/:id', component: User }
  ]
})

これで /user/foo や /user/bar などの URL 両方とも同じルートにマッチします。

動的セグメントはコロン : を使って表されます。ルートがマッチした時、この動的セグメントの値は全てのコンポーネント内で this.$route.params として利用可能になります。したがって、現在の User のテンプレートを次のように更新することで現在のユーザー ID を表示することができます。

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

こちら (opens new window) のデモの例も確認してみてください。

1 つのルートが複数の動的なセグメントを持つこともできます。そして、それらは $route.params の一致したフィールドとマップされます。例:

パターン	マッチしたパス	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: '123' }`

$route.params に加えて、$route オブジェクトでは $route.query (もし URL 上にクエリがあるなら) や $route.hash など便利な情報も利用可能です。それらの詳細については API リファレンスでご確認ください。

# パラメーター変更の検知

ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。

同じコンポーネントでパラメーター変更を検知するためには、 $route オブジェクトを watch するだけです。

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // ルートの変更の検知...
    }
  }
}

または、2.2 で導入された beforeRouteUpdate ナビゲーションガードを使用します:

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // ルート変更に反応する...
    // next() を呼び出すのを忘れないでください
  }
}

# すべてキャッチするルート / 404 Not found ルート

通常のパラメータは、/ で区切られた url フラグメントの間にある文字だけにマッチします。何でも一致させたい場合は、アスタリスク(*)を使うことができます:

{
  // 全てにマッチします
  path: '*'
}
{
  // `/user-`から始まる任意のものにマッチします
  path: '/user-*'
}

アスタリスク ルートを使用するときは、アスタリスク ルートが最後になるようにルートを正しく順序付けてください。 { path: '*' } ルートは、通常クライアントサイドの 404 ページで使われます。History モード を使用する場合は、正しいサーバの設定も同様にしっかりしてください。

アスタリスク を使用するときは、 pathMatch と名付けられたパラメータは、自動的に $route.params に追加されます。アスタリスク によってマッチされた url の残りを含みます:

// { path: '/user-*' } というルートが与えられた
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// { path: '*' } というルートが与えられた
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

# 高度なマッチングパターン

vue-router はパスのマッチングエンジンとして path-to-regexp (opens new window) を使っています。これは Optional による動的なセグメント、Zero or more / One or more に対する要求、また、カスタム正規表現パターンまでもサポートしています。これらの高度なパターンについてはこちらのドキュメンテーション (opens new window) または、 vue-router の中でそれらを使っているこちらの例 (opens new window) をご参照ください。

# マッチングの優先度

しばしば同じ URL で複数のルートがマッチすることがあります。そのようなケースではマッチングの優先度はルートの定義された順番によって決定されます。先に定義されたルートほど優先度が高くなります。

← はじめにネストされたルート →