ネストされたvue routerを別ファイルで管理する

Vue.jsでSPAを作っていると、ルーティングを機能単位で分けたくなります

例えば、ユーザに関する機能があったとして、ユーザの登録、更新、削除、詳細（所謂 CRUD ）それぞれにルーティングを設定する必要があり、それを一つの機能としてルーティングもまとめた方が将来的にも見通しがよくなります。

今回はcompanyに対するCRUDを設定していきます。
環境は以前に作成したものを使います。
詳しくは以下の記事をご覧ください

Cloud9でvue-cli環境を作る

ルーティング設定

src/router/index.jsにComapny-routesファイルを読み込み、そのファイルで設定を書くようにします。

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import CompanyRoutes from './company-routes'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
-    }
+    },
+    { ...CompanyRoutes }
   ]
 })

vue-routerの動作モードをhistoryモードに指定する

vue-routerをhistoryモードで動作するように修正します

historyモードはHTML5のHistory APIを使ったもので、これは/companies/5のようなきれいなURLとなります。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CompanyRoutes from './company-routes'

Vue.use(Router)

export default new Router({
+  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { ...CompanyRoutes }
  ]
})

company-routes.js作る

src/router/ に company-routes.jsを作成し
それに設定を書いていきます

src/router/company-routes.js

import Company from '@/components/company/Company'
import Index from '@/components/company/Index'
import Create from '@/components/company/Create'
import Update from '@/components/company/Update'
import Delete from '@/components/company/Delete'

export default {
  path: '/company',
  component: Company,
  children: [
    {
      path: '',
      component: Index
    },
    {
      path: 'create',
      component: Create
    },
    {
      path: 'update/:id',
      component: Update
    },
    {
      path: 'delete',
      component: Delete
    }
  ]
}

コンポーネントを作成する

src/components/company に上記で定義したコンポーネント作ります。

さらに src/components/company にあるコンポーネントを読み込むために src/components/company/Company.vue を作ります。
このファイルが無いと正常に読み込まれません

src/components/company/Company.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

これで以下のようにルーティングが設定されアクセスできるようになりました。

• ドメイン/company/
• ドメイン/company/create
• ドメイン/company/update/1
• ドメイン/company/delete/1

以上です。