Skill

vue-router-best-practices

Provides Vue Router 4 best practices for navigation guards, route params, lifecycle interactions, and fixes for gotchas like infinite loops, stale data, and deprecated next().

Vue

frontend

Install

npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin antfu-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Vue Router best practices, common gotchas, and navigation patterns.

Supporting Assets

LICENSE.mdSYNC.mdreference/router-beforeenter-no-param-trigger.mdreference/router-beforerouteenter-no-this.mdreference/router-guard-async-await-pattern.mdreference/router-navigation-guard-infinite-loop.mdreference/router-navigation-guard-next-deprecated.mdreference/router-param-change-no-lifecycle.mdreference/router-simple-routing-cleanup.mdreference/router-use-vue-router-for-production.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

159.9k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

159.9k

next-compile

1 file

Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.

vercel-next-js-2

139.2k

Stats

Stars4712

Forks253

Last CommitJan 31, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Navigation Guards

Navigating between same route with different params → See router-beforeenter-no-param-trigger
Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this
Navigation guard making API calls without awaiting → See router-guard-async-await-pattern
Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop
Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated

Route Lifecycle

Stale data when navigating between same route → See router-param-change-no-lifecycle
Event listeners persisting after component unmounts → See router-simple-routing-cleanup

Setup

Building production single-page application → See router-use-vue-router-for-production