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

想定シーン

ドキュメントルート直下

• /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'),
    }
  ]
})

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

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

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

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

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