日報(2020-10-18)　Vue の router の定義ファイルの分割

なぜ分割が必要なのか

router の index.js はそのまま使ってるとすぐに見るのも嫌になるほど巨大に育ってしまいます。しかも中身は同じような内容の巨大な配列になってしまうので、なにか機能を追加しようというモチベーションに対して、でも router の index.js 見るの嫌だしという阻害要因になってくるので、ちゃんと分割 して、常に小さく、理想的には 60行以下に、せめて100行程度に保っておくようにすると朗らかに開発できて楽しいです

分割の方法

こんなかんじで、OliverTwist のルーティングテーブルと LaPetiteFadette のルーティングテーブルをそれぞれのフォルダに定義して、それをインポートして VueRouter の routes 配列の中に 展開 します

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import OliverTwist from '@/views/oliver_twist/routes.js'
import LaPetiteFadette from '@/views/La_petite_Fadette/routes.js'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  ...OliverTwist.routes,
  ...LaPetiteFadette.routes,
]

OliverTwist のルート定義はこんなかんじで用意します、export する中身は VueRouter の routes配列 の 部分ですね

export default {
  routes: [
    {
      path: '/olivertwist/contents',
      name: 'OliverTwist_Contents',
      component: () => import(/* webpackChunkName: "about" */ '@/views/oliver_twist/Contents.vue')
    },
    {
      path: '/olivertwist/chapter01',
      name: 'OliverTwist_Chapter01',
      component: () => import(/* webpackChunkName: "about" */ '@/views/oliver_twist/chapter01.vue')
    },  
  ]
}

スプレッド構文

ところで ...OliverTwist.routes ですが、配列をその場所に展開してくれるという semantics (操作的意味論ですね)は流石にいつでも覚えているのですが、これの 名前ってなんだっけ？ ってしょっちゅう忘れてしまいます。名前がでてこないのは年相応でしかたないのかもしれませんが寂しいものです。
ちなみに無駄な教養をひけらかす老害みたいで申し訳ないのですがでボケ老人ってフランス語で gâteux なのですが、これがお菓子の複数形の gâteauxと紛らわしいなと思ってたらまさに今はなき東急東横店のお菓子屋さんの食べログに gâteux de voyage って名前のケーキ屋さんがでてて、失禁しかけるほど笑いました。旅のボケ老人って… ようするに 徘徊老人？
閑話休題緩和ケア、で今回も ... ってなんて名前だっけ と思ってググろうとすると suggestion がこんなかんじ

皆さんもググりまくってるみたいで笑いました、ちなみにこれって演算子じゃなかった気が…　で、どの suggestion を開いてみても見事に ... が無視された検索結果ばっかり候補にあがってで無残です、こういう演算子だか構文糖だかみたいなググっても無視されがちな記号を適切に検索できる技ってなにかないですかね

なので、また忘れた時のためにここに名前を書いておきますね、スプレッド構文 (opens new window)って

---