vue-router

## When to use this skill

Use this skill whenever the user wants to:
- Configure routing in Vue 2 or Vue 3 projects
- Implement dynamic routes, nested routes, and named routes
- Set up navigation guards (beforeEach, beforeResolve, afterEach)
- Use programmatic navigation with `router.push`, `router.replace`
- Implement lazy-loaded routes for code splitting
- Handle route meta fields for permissions and layout control

## How to use this skill

### Workflow

1. **Identify the Vue version** (Vue 2 uses Vue Router 3.x, Vue 3 uses Vue Router 4.x)
2. **Configure routes** with the appropriate API
3. **Add navigation guards** for authentication and authorization
4. **Implement lazy loading** for large page components

### 1. Vue Router 4 (Vue 3) Setup

```typescript
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/users/:id', component: () => import('./views/UserDetail.vue'), props: true },
  {
    path: '/admin',
    component: () => import('./views/Admin.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: 'dashboard', component: () => import('./views/AdminDashboard.vue') },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Navigation guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { path: '/login' };
  }
});

export default router;
```

### 2. Vue Router 3 (Vue 2) Setup

```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
});
```

### 3. Programmatic Navigation

```typescript
// Vue 3 with Composition API
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({ name: 'user', params: { id: '123' } });
router.replace('/home');
router.go(-1);
```

## Best Practices

- Centralize route guards for permission checks; lazy-load large page components
- Use named routes with `params`/`query` for type-safe navigation; avoid storing sensitive data in routes
- Prefer `createWebHistory` for clean URLs; configure server-side fallback for HTML5 history mode
- Use route `meta` fields for layout control, breadcrumbs, and access control

## Resources

- Vue Router 4: https://router.vuejs.org/
- Vue Router 3: https://v3.router.vuejs.org/

## Keywords

vue router, routing, navigation guards, Vue 3, Vue 2, lazy loading, dynamic routes, nested routes, meta fields, programmatic navigation, createRouter