Skills vue-router-best-practices

📦

vue-router-best-practices

Name: vue-router-best-practices
Author: github.com/vuejs-ai

v1.0.0 Content revision r2 Safe ⚡ Contains scripts⚙️ External commands

Improve Vue Router Navigation

Vue Router mistakes can cause stale data, redirect loops, and unreliable navigation. This skill provides focused Vue Router 4 patterns for implementation and review.

Supports: Claude Codex Code(CC)

🥈 80 Silver

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "vue-router-best-practices" from https://skillstore.io/skills/antfu-vue-router-best-practices.md and its manifest at https://skillstore.io/api/skills/antfu-vue-router-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/antfu-vue-router-best-practices.md Signed manifest GET /api/skills/antfu-vue-router-best-practices/manifest Signed lockfile GET /api/skills/antfu-vue-router-best-practices/lockfile

Test it

Using "vue-router-best-practices". Why does beforeEnter not run when only the user ID changes?

Expected outcome:

The route record remains active, so beforeEnter does not run. Watch the ID or use an in-component route update guard.

Using "vue-router-best-practices". My authentication guard redirects forever.

Expected outcome:

Exclude the login route from the authentication redirect and return one final result from each guard path.

Using "vue-router-best-practices". Review my hash-based router cleanup.

Expected outcome:

Register the hashchange listener when the component mounts.
Remove the same listener when the component unmounts.
Use Vue Router when the application needs guards, nested routes, or history support.

Security Audit

Safe

v5 • 7/23/2026 Open versioned report

All 15 static findings are false positives from documented Vue Router examples. Fixed local imports, JavaScript template literals, route checks, and framework warnings do not create execution or reconnaissance risks. No prompt injection or malicious intent was found.

Files scanned

1,540

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (6)

reference/router-beforerouteenter-no-this.md:131 reference/router-use-vue-router-for-production.md:75 reference/router-use-vue-router-for-production.md:81 reference/router-use-vue-router-for-production.md:87 reference/router-use-vue-router-for-production.md:94 reference/router-use-vue-router-for-production.md:100

⚙️ External commands (2)

reference/router-navigation-guard-infinite-loop.md:155-164 reference/router-navigation-guard-infinite-loop.md:164-166

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/antfu-vue-router-best-practices/security.svg)](https://skillstore.io/skills/antfu-vue-router-best-practices?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/antfu-vue-router-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-vue-router-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/antfu-vue-router-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

github.com/vuejs-ai. (2026). vue-router-best-practices security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5

BibTeX citation

@techreport{github-com-vuejs-ai-antfu-vue-router-best-practices-2026,
  author = {github.com/vuejs-ai},
  title = {vue-router-best-practices security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-router-best-practices security audit report (audit version 5)"
version: "1.0.0"
type: report
authors:
  - name: "github.com/vuejs-ai"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5"
identifiers:
  - type: other
    value: "skillstore:antfu-vue-router-best-practices:audit:5"
    description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Higher Skillstore usage

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

github.com/vuejs-ai Recommended Current

antfu-vue-router-best-practices

Skillstore Score 80

Evidence Confidence High

Skillstore usage 21

Updated

2026-08-21

github.com/vuejs-ai

vuejs-ai-vue-router-best-practices

Skillstore Score 80

Evidence Confidence High

Skillstore usage 18

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

100

Maintainability

Content

Community

Spec Compliance

What You Can Build

Review Navigation Guards

Find missing returns, unhandled promises, deprecated callbacks, and redirect loops in Vue Router guards.

Fix Stale Route Data

Choose watchers or update guards when reused route components display data for an earlier parameter.

Plan Production Routing

Create a maintainable router structure with lazy loading, nested routes, metadata, and fallback handling.

Try These Prompts

Explain a Router Pattern

Explain why this Vue Router behavior occurs and recommend the simplest Vue Router 4 pattern: [describe behavior].

Fix a Navigation Guard

Review this navigation guard for missing returns, deprecated next usage, asynchronous errors, and redirect loops: [paste guard].

Review Route Data Loading

Review this route component for stale parameter data and lifecycle mistakes. Suggest a watcher, update guard, or route-level approach: [paste component].

Audit a Router Architecture

Audit this Vue Router configuration for guard order, authorization flow, redirects, lazy loading, nested routes, cleanup, and error handling: [paste files].

Best Practices

Return navigation outcomes from guards and await every asynchronous authorization decision.
React directly to route parameter changes when Vue reuses a component instance.
Keep redirects centralized and exclude their destination routes from repeated guard checks.

Avoid

Do not rely only on mounted hooks for data tied to changing route parameters.
Do not call next multiple times or mix next callbacks with return-based guard outcomes.
Do not create hashchange listeners without removing them during component cleanup.