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 hairyf-skills-4

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

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars14

Forks1

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