beta

Vue Routerで複数ルートを一つのルートにまとめて制御する

Vue Routerを使っていると、「これ同じコンポーネントでいけるんだけど、ルートを複数設定するのが面倒」というシーンがあります。そういうシーンで、ルートを一つにしつつ受け取るパラメータを制限する方法です。

公開日:2019年10月8日

想定シーン

ドキュメントルート直下

  • /code/
  • /note/
  • /author/

という3つのルートがドキュメントルート直下にあって、それぞれのコンポーネントは全て同じというケース。

同じコンポーネント下でパラメータだけ受け取りたいケース

  • /users/
  • /users/profile
  • /users/followers/
  • /users/follows/

こういうケースで、/users/以下のルートは一つのコンポーネントで制御しているケース。

どちらのケースも、

path: "/:code,

みたいに書くと、意図しない他のルートにもマッチしてしまう可能性があるため、それぞれのルートをrouter.jsに書くことになります。

しかし、コンポーネントをネストしていたり、複雑な構造の場合、router.jsが長くなって視認性もメンテナンス性も下がってしまします。

今回の方法は、他のルートにマッチしないようにしつつ、共通処理のルートを一つにまとめます。

ルートをまとめる方法

Vue Routerのparams制御は、「path-to-regexp」というプラグインが担っているそうです。

このプラグインは正規表現でのマッチが可能なので、こちらを利用して制御します。

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

Vue Routerで受けるパラメータの規定値を設定して値を制限する

正規表現がわかる方は「なんだそんなことか」という感じでしょう。肝となるのは「(code|note|author)」の部分です。

「path-to-regexp」では、パラメータの後にかっこ「()」でくくった部分は、マッチルールを正規表現で設定するようになっていて、上記の例ではマッチするルート名をOR条件(|)で設定しています。

設定は、正規表現であればなんでも使えるので、かなり自由に設定ができますね。


Vue Routerで複数ルートを一つのルートにまとめて制御する方法を見てきました。

この方法をマスターすれば、一つにまとめるだけでなくいろんなシーンで活躍してくれそうです。

Author

C0d3man52
Personal

新着ノート

新着コード