vue中路由信息应该如何管理才能使项目更好维护

已知实现方案和优劣：

1.（暂定）路由信息和页面级组件放在同一目录下，文档结构如下：

// 由 vue/cli 生成的项目文档进行改造
- src
 - assets
 - components
 - router.ts
 - views
  - home-and-about
   - routes.ts
   - HomeView.vue
   - AboutView.vue
  - other
   - routes.ts
   - OtherView.vue

• src/views/home-and-about/routes.ts 文件如下：
  • 路由信息用来体现组件父子嵌套关系，而不是用于抽取公共路径，当有相同路径前缀时建议重复书写，以便后期维护时通过页面 url 快速定位。例如下例中的 /home-and-about/

import { RouteRecordRaw } from 'vue-router'
import HomeView from './HomeView.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/home-and-about/home',
    name: 'home-and-about/home',
    component: HomeView
  },
  {
    path: '/home-and-about/about',
    name: 'home-and-about/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" */ './AboutView.vue')
  }
]
export default routes

• src/router.ts 文件如下

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
import HomeAndAboutRoutes from './views/home-and-about/routes'
const routes: Array<RouteRecordRaw> = [
  ...HomeAndAboutRoutes
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2.路由信息统一在 src/router 下管理

• 缺点：
  • 路由信息中 import() 引用的组件不支持点击跳转
  • 在后期维护时一般都是通过 url 入手查找对应页面级组件，统一管理的方案在查找到路由信息后还得再次查找组件文件