Nuxt.js でルーティングを部分的に書き換えたかった

やりたかったこと

複数種類のユーザーが 1つの Nuxt.js アプリケーション上を利用する場合に、
可読性とユーザビリティを考えて以下のように実現したいと考えました。

ユーザー種別

• admin （運営管理者）
• manager （会社の管理者）
• employee （従業員=一般ユーザー）

ディレクトリ構成

わかりやすいように、各ユーザー向けの毎の画面はユーザー種別ごとにディレクトリを切りたい。

pages
　├ admin
　│ ├ index.vue
　│ └ login.vue
　├ manager
　│ ├ index.vue
　│ └ login.vue
　└ employee
　　├ index.vue
　　└ login.vue

実現したいルーティング

employee 向けの URL はディレクトリ名を入れたくない。

// これらは Nuxt が自動でルーティングしてくれる
http://localhost/admin/  => /admin/index
http://localhost/admin/login  => /admin/login
http://localhost/manager/  => /manager/index
http://localhost/manager/login => /manager/login

// employee は一般ユーザーなので URL のプリフィックスを外したいけど、自動ではルーティングされない
http://localhost/  => /employee/index
http://localhost/login  => /employee/login

実現方法

Nuxt の設定で router プロパティに extendsRoutes を指定します。

nuxt.config.js

export default {
  // ...
  // 以下を追記
  router: {
    extendRoutes(routes) {
      routes = routes.map((route) => {
        if (!route.path.startsWith('/employee')) {
          return route;
        }
        // /employee/hogehoge => /pages/employee/hogehoge で生成されたルーティングを
        // /hogehoge => /pages/employee/hogehoge のルーティングに書き換える
        route.path = route.path.replace('/employee', '/');
        return route;
      });
    },
  },
};

できた！
extendRoutes の引数として受け取る routes は VueRouter の routes プロパティと同じで単なる設定オブジェクトの配列なので、 push したり filter したりと他にもいろいろカスタマイズできます。

他にこんな実現方法もあるよ〜とか、もっとスマートなやり方とかあれば教えてください！