Vue Router Skill Skill | Agent Skills

Vue Router Skill

Production-grade skill for mastering Vue Router and building robust navigation systems.

Purpose

Single Responsibility: Teach Vue Router configuration, navigation patterns, route guards, lazy loading, and advanced routing techniques.

Parameter Schema

interface VueRouterParams {
  topic: 'config' | 'guards' | 'lazy-loading' | 'meta' | 'navigation' | 'all';
  level: 'beginner' | 'intermediate' | 'advanced';
  context?: {
    auth_required?: boolean;
    app_type?: 'spa' | 'ssr';
  };
}

Learning Modules

Module 1: Router Setup & Configuration

Prerequisites: vue-fundamentals
Duration: 2 hours
Outcome: Configure Vue Router

| Topic | Concept | Exercise | |-------|---------|----------| | Installation | Vue Router setup | Basic config | | Routes array | Route definitions | Multi-page app | | History modes | Hash vs HTML5 | Production setup | | Router-view | Outlet component | Layout system | | Router-link | Navigation links | Navigation menu |

Module 2: Dynamic & Nested Routes

Prerequisites: Module 1
Duration: 2-3 hours
Outcome: Build complex route structures

| Pattern | Example | Exercise | |---------|---------|----------| | Dynamic params | /user/:id | User profile | | Optional params | /user/:id? | Optional filters | | Catch-all | /:pathMatch(.*)* | 404 page | | Nested routes | /dashboard/settings | Admin layout | | Named views | Multiple outlets | Dashboard widgets |

Module 3: Navigation Guards

Prerequisites: Modules 1-2
Duration: 3-4 hours
Outcome: Secure routes with guards

| Guard Type | Scope | Use Case | |------------|-------|----------| | beforeEach | Global | Auth check | | beforeEnter | Per-route | Role check | | beforeRouteEnter | Component | Data prefetch | | beforeRouteUpdate | Component | Param change | | beforeRouteLeave | Component | Unsaved changes | | afterEach | Global | Analytics |

Guard Composition:

router.beforeEach(async (to, from) => {
  // Auth check
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'Login', query: { redirect: to.fullPath } }
  }

  // Role check
  if (to.meta.roles && !hasRole(to.meta.roles)) {
    return { name: 'Unauthorized' }
  }

  return true
})

Module 4: Lazy Loading & Code Splitting

Prerequisites: Module 3
Duration: 2 hours
Outcome: Optimize route loading

| Technique | Implementation | Benefit | |-----------|----------------|---------| | Basic lazy | () => import() | Smaller bundles | | Named chunks | webpackChunkName | Grouped loading | | Prefetching | router.afterEach | Faster navigation | | Loading states | Async components | Better UX |

Module 5: Advanced Patterns

Prerequisites: Modules 1-4
Duration: 3 hours
Outcome: Expert routing techniques

| Pattern | Use Case | Exercise | |---------|----------|----------| | Route meta | Page metadata | SEO, auth, layout | | Scroll behavior | Scroll position | Saved positions | | Transitions | Page animations | Enter/leave effects | | Route modules | Large apps | Feature-based routes |

Validation Checkpoints

Beginner Checkpoint

[ ] Set up router with basic routes
[ ] Use router-link and router-view
[ ] Create dynamic route with params
[ ] Access route params in component

Intermediate Checkpoint

[ ] Implement auth guard
[ ] Create nested route layout
[ ] Add lazy loading to routes
[ ] Use route meta for titles

Advanced Checkpoint

[ ] Build full auth flow with guards
[ ] Implement route-based code splitting
[ ] Create route transition animations
[ ] Design modular route structure

Retry Logic

const skillConfig = {
  maxAttempts: 3,
  backoffMs: [1000, 2000, 4000],
  onFailure: 'provide_simpler_route'
}

Observability

tracking:
  - event: route_configured
    data: [route_count, guards_count]
  - event: navigation_pattern_learned
    data: [pattern_name, complexity]
  - event: skill_completed
    data: [routes_built, auth_implemented]

Troubleshooting

Common Issues

| Issue | Cause | Solution | |-------|-------|----------| | Route not matching | Wrong path order | Specific before generic | | Guard infinite loop | Guard → same route | Check target route | | Lazy load fails | Wrong import path | Verify file exists | | Params undefined | Missing props: true | Enable props |

Debug Steps

Check Vue Devtools router tab
Verify route order (specific first)
Console.log in guards
Check router.getRoutes()

Unit Test Template

import { describe, it, expect, beforeEach } from 'vitest'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './routes'

describe('Router', () => {
  let router: Router

  beforeEach(() => {
    router = createRouter({
      history: createWebHistory(),
      routes
    })
  })

  it('redirects to login when not authenticated', async () => {
    await router.push('/dashboard')
    expect(router.currentRoute.value.name).toBe('Login')
  })

  it('allows access to public routes', async () => {
    await router.push('/about')
    expect(router.currentRoute.value.name).toBe('About')
  })
})

Usage

Skill("vue-router")

Related Skills

vue-fundamentals - Prerequisite
vue-pinia - Auth state for guards
vue-nuxt - File-based routing alternative

Agent Skills: Vue Router Skill

Skill Files