柳屋

ソースコードのリファクタからよもやままで

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

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

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

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

yanagiya.hatenadiary.com

ルーティング設定

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

以上です。

;(function(document){ var pres = document.getElementsByTagName("pre") for(var i=pres.length; i--; ){  var el = makeOl(pres[i]) pres[i].appendChild(el) } function makeOl(pre){ if (pre.className.indexOf("gist") !== -1) { return } var ol = document.createElement("ol") , li = document.createElement("li") , df = document.createDocumentFragment() , br = pre.innerHTML.match(/\n/g) || 0 ol.className = "preLine" ol.setAttribute("role", "presentation") // no lang, no line-number if( pre.className && ! /lang-./.test(pre.className) ){ br.length += 1 } for(var i=br.length; i--; ){ var li2 = li.cloneNode(true) df.appendChild(li2) } ol.appendChild(df) return ol } })(document)