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

Learning Modules

Module 1: Router Setup & Configuration

Module 2: Dynamic & Nested Routes

Module 3: Navigation Guards

Module 4: Lazy Loading & Code Splitting

Module 5: Advanced Patterns

Validation Checkpoints

Beginner Checkpoint

Intermediate Checkpoint

Advanced Checkpoint

Retry Logic

Observability

Troubleshooting

Common Issues

Debug Steps

Unit Test Template

Usage

Related Skills

Resources

vue-router

Vue Router Skill

Purpose

Parameter Schema