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

Module 2: Dynamic & Nested Routes

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

Module 3: Navigation Guards

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

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

Module 5: Advanced Patterns

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

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

Debug Steps

1. Check Vue Devtools router tab
2. Verify route order (specific first)
3. Console.log in guards
4. 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

Resources

• Vue Router Documentation
• Navigation Guards
• Lazy Loading