How to use dynamic file import in vue router, and whats the benefit of using child routes ?

Vue Router code splitting uses dynamic import() on route components, creating separate chunks loaded only when routes activate, slashing the initial bundle by 60-80%.​
Vue Router supports () => import() to lazy-load components only when needed, reducing initial bundle size and improving performance.

Child routes let you group related pages under a shared layout, avoid duplicate UI code, and keep routes structured and scalable. When restructuring route architecture as part of a Vue application modernization project, Vue.js Migration Services can help support the transition to a more maintainable application structure. Child routes also improve navigation efficiency since only the child view changes inside the parent layout.

Code

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/dashboard',
      component: () => import('@/layouts/DashboardLayout.vue'),
      children: [
        { path: '', component: () => import('@/views/Dashboard.vue') },
        { path: 'reports', component: () => import('@/views/Reports.vue') }
      ]
    },
    { path: '/', component: () => import('@/views/Home.vue') }
  ]
})