vue-router-best-practices

Overview of vue-router-best-practices skill

What vue-router-best-practices helps with

The vue-router-best-practices skill is a focused troubleshooting and implementation guide for Vue Router 4, especially around navigation guards, route param changes, and route-component lifecycle behavior. It is most useful when your app already uses Vue 3 + Vue Router and you need correct patterns fast, not generic framework advice.

Who should install this skill

This skill fits frontend developers who are:

• shipping authenticated or permission-gated routes
• debugging stale data when only route params change
• migrating older guard code that still uses next()
• trying to avoid redirect loops and silent routing bugs

If your real job is “make routing safe and predictable in production,” this skill is a better fit than a broad Vue prompt.

Why this skill is different from a generic prompt

The value of vue-router-best-practices is that it centers a small set of high-impact Vue Router gotchas that regularly break real apps:

• beforeEnter not firing on param or query updates
• beforeRouteEnter not having access to this
• async guard logic that does not actually block navigation
• infinite redirects in global guards
• stale component state when route params change
• outdated next() patterns in Vue Router 4

That makes the skill especially useful for bug fixing, code review, and migration work.

What it does not try to cover

This is not a complete Vue Router course, routing API reference, or architecture guide for every router mode. The skill is narrow by design: it helps with practical correctness issues that affect real navigation behavior.

How to Use vue-router-best-practices skill

Install context for vue-router-best-practices

Use vue-router-best-practices inside an AI coding workflow where the model can inspect your router config, route components, and guard logic. The skill itself lives in skills/vue-router-best-practices in the vuejs-ai/skills repository:

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

If your platform supports skill installation, use its normal add/import flow for the repo, then target vue-router-best-practices.

Read these files first before prompting

For the fastest understanding, read in this order:

1. SKILL.md
2. reference/router-navigation-guard-next-deprecated.md
3. reference/router-navigation-guard-infinite-loop.md
4. reference/router-param-change-no-lifecycle.md
5. reference/router-beforeenter-no-param-trigger.md

This reading path surfaces the highest-risk mistakes first: broken guard control flow, redirect loops, and stale route-driven data.

What input the skill needs

The vue-router-best-practices skill works best when you provide concrete routing code, not just a symptom. Good inputs include:

• router/index.ts or router.ts
• route records with meta
• global guards like beforeEach
• in-component guards
• components rendered by dynamic routes such as /users/:id
• a short reproduction of what navigation should do vs what it does now

Without code, the output will be more generic and less trustworthy.

Turn a rough problem into a strong prompt

Weak prompt:

• “My Vue Router is buggy. Help.”

Strong prompt:

• “Use vue-router-best-practices to review this Vue Router 4 setup. When navigating from /orders/1 to /orders/2, access checks do not rerun and stale order data remains visible. We use a route-level beforeEnter, an async beforeEach, and onMounted in OrderDetail.vue. Identify the bug sources, explain which Vue Router behaviors are causing them, and rewrite the guards and component logic using Vue Router 4 return-based patterns.”

That version gives the model enough structure to apply the right reference file and produce a usable fix.

Best workflow for vue-router-best-practices usage

A practical workflow:

1. Paste the failing route config and guard code.
2. Describe the exact navigation path that fails.
3. Ask the model to map your issue to one of the known gotchas.
4. Request a corrected implementation.
5. Ask for a short test checklist covering direct entry, same-route param changes, redirects, and unauthorized access.

This workflow is better than asking for “best practices” in the abstract because most Vue Router bugs are scenario-dependent.

Use cases where this skill is strongest

The best vue-router-best-practices usage cases are:

• auth and role-based routing
• route-param-driven detail pages
• Vue Router 3 to 4 cleanup
• debugging reused component instances
• replacing fragile next() control flow
• reviewing whether guard logic belongs globally, per-route, or in-component

Common patterns the skill can correct

Expect this skill to help you choose between:

• beforeEach vs beforeEnter vs onBeforeRouteUpdate
• watch(() => route.params.id) vs forcing remount with :key
• return-based guards vs deprecated next()
• component-level fetching vs guard-level prechecks
• Vue Router vs simple hash routing for production apps

These are real implementation choices, not style-only recommendations.

Practical prompt template for better outputs

Use this template for better vue-router-best-practices guide results:

• “Use vue-router-best-practices on this Vue 3 app.”
• “Environment: Vue 3, Vue Router 4, Composition API.”
• “Problem: [describe exact navigation bug].”
• “Expected behavior: [what should happen].”
• “Current behavior: [what actually happens].”
• “Files: [paste router config and affected component].”
• “Please: identify the Vue Router gotcha, explain why it happens, propose the safest fix, and include edge cases to test.”

Tips that materially improve result quality

Give the model these details if you have them:

• whether the route changes path or only params/query
• whether the component is reused across IDs
• whether auth is synchronous or API-backed
• whether you are using Options API or Composition API
• whether the code still depends on next()

Those details directly determine which vue-router-best-practices install and usage advice applies.

vue-router-best-practices skill FAQ

Is vue-router-best-practices good for beginners

Yes, if you already know basic Vue and need help with routing behavior that is not obvious. It is not a step-by-step intro to Vue Router, but it is beginner-friendly for common production mistakes because the references are centered on specific bugs and fixes.

When should I use this instead of a normal coding prompt

Use vue-router-best-practices when the problem involves route transitions, guard timing, reused route components, or redirect behavior. A normal prompt may suggest plausible code, but this skill is more likely to catch Vue Router-specific edge cases such as param-only navigation not retriggering beforeEnter.

Does this skill cover Vue Router 4 specifically

Yes. The source material explicitly targets Vue Router 4 patterns, including migration away from the deprecated next() style in favor of return-based guards.

What are the biggest risks it helps prevent

The highest-value issues it helps prevent are:

• unauthorized access due to guards not rerunning
• stale page data on param changes
• hung or misfiring async navigation checks
• infinite redirect loops
• lifecycle misunderstandings in beforeRouteEnter

When is this skill a poor fit

Skip this skill if your problem is mainly:

• SSR routing with framework-specific abstractions
• general Vue component architecture unrelated to navigation
• a full routing tutorial from first principles
• non-Vue frontend routing libraries

It is a targeted vue-router-best-practices for Frontend Development skill, not a universal routing handbook.

How to Improve vue-router-best-practices skill

Give navigation scenarios, not just code dumps

To improve vue-router-best-practices outputs, describe the exact route transition:

• from which URL
• to which URL
• whether only params/query changed
• whether the user should be redirected, blocked, or allowed

This matters because many Vue Router bugs only appear on one navigation path.

Include both router and component code

A frequent failure mode is diagnosing only half the problem. For example, a route guard may be correct while the component still relies on onMounted and shows stale data after /users/1 to /users/2. Include both files so the skill can connect guard logic with component lifecycle behavior.

Ask for a decision, not only a fix

Better prompt:

• “Should this logic live in beforeEach, beforeEnter, onBeforeRouteUpdate, or a watch, and why?”

This produces stronger output than “fix this bug,” because the skill is especially useful at choosing the right routing layer.

Watch for these common failure modes

The most common issues to check after the first output:

• the fix still assumes beforeEnter runs on param changes
• the solution mixes next() with return-based patterns
• the auth redirect can still target the current route
• async checks are awaited but errors/timeouts are not handled
• stale data is fixed by forced remount when a lighter watch would do

Ask for a test checklist after the patch

A good improvement step is:

• “Now give me a minimal test checklist for direct visit, authenticated visit, unauthenticated redirect, same-route param change, query change, and invalid ID.”

This is especially important for vue-router-best-practices skill usage because many routing bugs only appear after the initial happy path works.

Use the references as targeted review aids

After you get a first answer, ask the model to validate it against the most relevant reference:

• router-beforeenter-no-param-trigger.md
• router-navigation-guard-infinite-loop.md
• router-param-change-no-lifecycle.md

That second pass often catches subtle mistakes and increases confidence before you edit production routing code.