---

name: vue-router description: Master Vue Router - Navigation, Guards, Lazy Loading, Meta Fields, History Modes sasmp_version: "1.3.0" bonded_agent: 04-vue-router bond_type: PRIMARY_BOND version: "2.0.0" last_updated: "2025-01"

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

Copyinterface 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

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

Module 2: Dynamic & Nested Routes

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

Module 3: Navigation Guards

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

Guard Composition:

Copyrouter.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

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

Module 5: Advanced Patterns

CopyPrerequisites: 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

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

Observability

Copytracking:
  - 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

Copyimport { 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

CopySkill("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