Dynamic routes và lazy loading routes?

Dynamic segment: path: '/user/:id' — đọc qua route.params.id.

Lazy loading với dynamic import:

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  },
  {
    path: '/user/:id',
    // Với Vite: không cần webpackChunkName; tên chunk cấu hình qua build.rollupOptions
    component: () => import('./views/User.vue')
  }
]

• Lazy loading: component chỉ được download khi navigate đến route đó — giảm initial bundle size.
• Lưu ý: / webpackChunkName / là Webpack magic comment, không có tác dụng trong Vite.
• Lưu ý: đọc route.params.id trong <script setup>: dùng const route = useRoute().

Dynamic segment: path: '/user/:id' — read via route.params.id.

Lazy loading with dynamic import:

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  },
  {
    path: '/user/:id',
    // Named chunk group
    component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
  }
]

Lazy loading: component is only downloaded when navigating to that route — reduces initial bundle size.

Pitfall: to read route.params.id in <script setup>: use const route = useRoute().