[Vue Router] routesプロパティを分離してメンテナンス性を高める

ささやかな小ネタです

Vue Routerをインポート

まずはVue.jsをインストール

$ npm init vue@latest

src/router/index.ts　
が最初から作られている。

アプリのディレクトリ(/src/など)にrouter.jsを作成して、vue-routerをインポートする。

router.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

RouteRecordRawを使用して分離

そのまま使用してもよいが、routesプロパティは分離した方がメンテナンス性が高い。
router.jsを修正する。

router.js

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue'

const routerSettings: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]
  
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routerSettings
})

export default router

この時点では大して変わってないじゃないかと思われるかもしれないが、開発が進みページが増えていくと、ルートの配列を別のファイルとして分離することで管理しやすくなる。
大量の下層ページを作成しなければいけないときに、createRouteRaw関数などを自作して自動生成することも可能。

残念ながら私は増えた後に気づいてしまったので同じような状況の人たちのために。