---
globs: src/routers/**/*.js
---

# Routing và Navigation Patterns

## Router Configuration
Sử dụng [routers/index.js](mdc:src/routers/index.js) làm main router với:
- History mode
- Authentication guard
- Dynamic page titles

## Route Definition Pattern
```javascript
// routers/routes.js
export const routes = [
  {
    path: '/',
    name: 'dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: {
      title: 'Dashboard',
      requiresAuth: true,
      roles: ['admin', 'user']
    }
  },
  {
    path: '/users',
    name: 'users',
    component: () => import('@/views/users/UserList.vue'),
    meta: {
      title: 'Quản lý người dùng',
      requiresAuth: true,
      roles: ['admin']
    }
  },
  {
    path: '/users/:id',
    name: 'user-detail',
    component: () => import('@/views/users/UserDetail.vue'),
    meta: {
      title: 'Chi tiết người dùng',
      requiresAuth: true
    }
  }
]
```

## Navigation Guards
```javascript
// routers/index.js
router.beforeEach(async (to, from, next) => {
  const uStore = useUserStore()
  
  // Public pages không cần authentication
  const publicPages = ['login', 'register', 'unauthorized']
  const authRequired = !publicPages.includes(to.name)
  
  // Set page title
  document.title = to.meta.title + " | LADA Express Management Portal"
  
  // Check authentication
  if (authRequired && !uStore.user) {
    uStore.returnUrl = to.fullPath
    next({ name: 'login' })
  } else {
    next()
  }
})
```

## Programmatic Navigation
```javascript
// Trong component
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// Navigate to new page
const goToUserDetail = (userId) => {
  router.push({
    name: 'user-detail',
    params: { id: userId }
  })
}

// Navigate with query params
const goToUserList = (filters) => {
  router.push({
    name: 'users',
    query: {
      page: 1,
      search: filters.search,
      status: filters.status
    }
  })
}

// Replace current route
const replaceRoute = () => {
  router.replace({ name: 'dashboard' })
}

// Go back
const goBack = () => {
  router.go(-1)
}
```

## Route Parameters và Query
```javascript
// Accessing route params
const userId = computed(() => route.params.id)

// Accessing query params
const searchQuery = computed(() => route.query.search)
const currentPage = computed(() => parseInt(route.query.page) || 1)

// Watch for route changes
watch(() => route.params.id, (newId) => {
  if (newId) {
    fetchUserData(newId)
  }
})

// Watch query changes
watch(() => route.query, (newQuery) => {
  applyFilters(newQuery)
}, { deep: true })
```

## Nested Routes
```javascript
{
  path: '/orders',
  name: 'orders',
  component: () => import('@/views/orders/OrderLayout.vue'),
  children: [
    {
      path: '',
      name: 'order-list',
      component: () => import('@/views/orders/OrderList.vue'),
      meta: { title: 'Danh sách đơn hàng' }
    },
    {
      path: 'create',
      name: 'order-create',
      component: () => import('@/views/orders/OrderCreate.vue'),
      meta: { title: 'Tạo đơn hàng mới' }
    },
    {
      path: ':id',
      name: 'order-detail',
      component: () => import('@/views/orders/OrderDetail.vue'),
      meta: { title: 'Chi tiết đơn hàng' }
    }
  ]
}
```

## Route Meta Fields
```javascript
// Sử dụng meta fields cho:
{
  meta: {
    title: 'Page Title',           // Page title
    requiresAuth: true,            // Cần authentication
    roles: ['admin', 'manager'],   // Required roles
    breadcrumb: [                  // Breadcrumb navigation
      { name: 'Home', path: '/' },
      { name: 'Users', path: '/users' }
    ],
    keepAlive: true,               // Keep component alive
    layout: 'admin'                // Layout to use
  }
}
```

## Dynamic Route Loading
```javascript
// Lazy loading components
const routes = [
  {
    path: '/users',
    component: () => import(
      /* webpackChunkName: "users" */ 
      '@/views/users/UserList.vue'
    )
  }
]

// Preloading routes
router.beforeResolve((to, from, next) => {
  if (to.matched.length === 0) {
    next({ name: '404' })
  } else {
    next()
  }
})
```

## Error Handling
```javascript
// 404 Route
{
  path: '/:pathMatch(.*)*',
  name: 'not-found',
  component: () => import('@/views/errors/NotFound.vue'),
  meta: { title: 'Không tìm thấy trang' }
}

// Error boundary
router.onError((error) => {
  console.error('Router error:', error)
  // Handle error appropriately
})
```