The Complete Production SOP: How to Deploy and Run Vue Router 4 Route Guards & Dynamic Route Matching in Autonomous AI Agents

---
name: "vue-router-4-navigation-guards"
description: "Manage client-side routing, authentication guards, scroll behavior, and nested views in Vue 3."
metadata:
  author: "Eduardo San Martin Morote"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "vue router beforeeach auth guard"
  - "scrollbehavior vue router"
  - "dynamic route params vue router"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean;
    guestOnly?: boolean;
  }
}

export const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/LoginView.vue'),
    meta: { guestOnly: true }
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: () => import('@/views/DashboardView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/users/:id(\\d+)',
    name: 'user-detail',
    component: () => import('@/views/UserDetailView.vue'),
    meta: { requiresAuth: true },
    props: true
  }
];

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    if (to.hash) {
      return { el: to.hash, behavior: 'smooth' };
    }
    return { top: 0, left: 0 };
  }
});

import { describe, it, expect, beforeEach } from 'vitest';
import { router } from '@/router';
import { setActivePinia, createPinia } from 'pinia';
import { useAuthStore } from '@/stores/auth';

describe('Vue Router 4 Navigation Guards', () => {
  beforeEach(async () => {
    setActivePinia(createPinia());
    await router.push('/');
  });

  it('redirects unauthenticated users from protected routes to login', async () => {
    const auth = useAuthStore();
    auth.isAuthenticated = false;
    auth.isInitialized = true;

    await router.push('/dashboard');
    expect(router.currentRoute.value.name).toBe('login');
    expect(router.currentRoute.value.query.redirect).toBe('/dashboard');
  });
});