Vue Router
Official client-side router for Vue.js — maps URL paths to Vue components with support for nested routes, dynamic segments, navigation guards, and lazy loading. Vue Router 4 features: createRouter() + createWebHistory()/createWebHashHistory(), route params (/agents/:id via useRoute().params.id), nested routes with children[] array, navigation guards (beforeEach, beforeRouteEnter, beforeRouteUpdate), lazy loading (component: () => import('./AgentView.vue')), route meta for auth checks, programmatic navigation (useRouter().push('/agents')), named routes, route transitions, scroll behavior, and 404 catch-all routes. Deeply integrated with Vue 3 Composition API and Vue DevTools.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Navigation guards are the primary auth mechanism — always validate auth server-side, not just in beforeEach guard (client-side guards can be bypassed). Never store sensitive agent data in route params (visible in URL, browser history). Use route meta for permission levels, enforce on server.
⚡ Reliability
Best When
Building a Vue 3 SPA with multiple views, authenticated routes, and deep linking — Vue Router is the standard solution with excellent DevTools integration and Composition API support.
Avoid When
You're using SSR and need full server-side routing (use Nuxt), or building a simple single-page app with no navigation needs.
Use Cases
- • Agent SPA routing — createRouter({ routes: [{ path: '/agents', component: AgentList }, { path: '/agents/:id', component: AgentDetail }] }) maps agent URLs to components; useRoute().params.id retrieves agent ID from URL in Composition API setup()
- • Auth guard for agent routes — router.beforeEach((to, from) => { if (to.meta.requiresAuth && !isAuthenticated()) return '/login' }) protects agent admin routes; meta.requiresAuth on route definition enables guard logic
- • Lazy loading agent views — { path: '/agents/:id', component: () => import('./views/AgentDetail.vue') } splits agent view into separate chunk; Vite/webpack splits on import() boundary for faster initial load
- • Nested agent workspace routes — children: [{ path: 'settings', component: AgentSettings }, { path: 'logs', component: AgentLogs }] renders agent sub-pages into <router-view> inside parent AgentLayout component
- • Programmatic agent navigation — const router = useRouter(); router.push({ name: 'agent-detail', params: { id: agent.id } }) navigates to agent page after creation; router.replace() navigates without adding to history for redirects
Not For
- • Server-side routing — Vue Router is client-side; for SSR routing use Nuxt.js which wraps Vue Router with server-side rendering support
- • Non-Vue frameworks — Vue Router is Vue-specific; use React Router for React, SvelteKit for Svelte, or TanStack Router for framework-agnostic routing
- • API routing — Vue Router handles frontend navigation only; for Express/Fastify backend routing use framework-native router
Interface
Authentication
No auth — client-side router. Auth is implemented via navigation guards (beforeEach) checking authentication state. Route meta fields carry auth requirements.
Pricing
Vue Router is MIT licensed, maintained by the Vue core team. Free for all use.
Agent Metadata
Known Gotchas
- ⚠ Vue Router 4 is not compatible with Vue 2 — vue-router@4 requires Vue 3; vue-router@3 for Vue 2; mixing versions causes 'Invalid VNode type' or createApp errors; agent Vue projects must match router major version to Vue major version exactly
- ⚠ useRoute() and useRouter() must be called inside setup() — composables are context-sensitive; calling useRoute() outside Vue component setup (in plain JS, Pinia store setup, or lifecycle hooks called after component unmount) returns undefined or throws; use inject() pattern or pass router as argument for non-component agent code
- ⚠ Dynamic route params don't re-trigger setup() on change — navigating from /agents/1 to /agents/2 reuses component instance; onMounted doesn't fire again; watch(() => route.params.id, fetchAgent) or use key prop on <router-view> to force remount for agent detail pages
- ⚠ createWebHistory() requires server-side catch-all — HTML5 history mode sends real URL requests to server; agent SPA deployed without server catch-all returns 404 on page refresh or direct URL access; configure nginx/Apache to serve index.html for all routes, or use createWebHashHistory() for static hosting
- ⚠ Navigation guards must call next() in Vue Router 3 — in Vue Router 4, guards return value instead of calling next(); mixing Vue Router 3 guard syntax (calling next(false)) in Vue Router 4 causes silent navigation hang; agent code migrated from Vue 2/Router 3 must update guard signatures
- ⚠ Route meta type safety requires TypeScript augmentation — route.meta properties are typed as unknown by default; add declare module 'vue-router' { interface RouteMeta { requiresAuth: boolean } } to get type-safe meta access in agent TypeScript projects; without augmentation, meta.requiresAuth gives TypeScript error
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Vue Router.
Scores are editorial opinions as of 2026-03-06.