Skills

Skill 15 of 19

Vue Router Best Practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

1 minute · 72 words · 3 sections

Install

$ npx skills add antfu/skills --skill vue-router-best-practices

$ npx skills add antfu/skills

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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

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

Route Lifecycle

Stale data when navigating between same route → See router-param-change-no-lifecycle (opens in a new tab)
Event listeners persisting after component unmounts → See router-simple-routing-cleanup (opens in a new tab)

Setup

Building production single-page application → See router-use-vue-router-for-production (opens in a new tab)

About this skill

Licence: MIT
Source: skills/vue-router-best-practices/SKILL.md

Colophon for this issue

Colophon

How this issue was made

Source

github.com/antfu/skills, branch main, last pushed 23 June 2026.

Licence

MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

19 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.

Issue colours

Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Repaired “Navigation Guards” from h3 to h2, closing a skipped level.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Signal

This repository is unranked on skills.sh, which says nothing about it: the leaderboard covers a fraction of published skills.

Agent surfaces

The whole issue is available as one markdown document at /antfu/skills.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

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

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

Route Lifecycle

Stale data when navigating between same route → See router-param-change-no-lifecycle (opens in a new tab)
Event listeners persisting after component unmounts → See router-simple-routing-cleanup (opens in a new tab)

Setup

Building production single-page application → See router-use-vue-router-for-production (opens in a new tab)

Vue Router Best Practices

Navigation Guards

Route Lifecycle

Setup

About this skill

Colophon

Vue Router Best Practices

Navigation Guards

Route Lifecycle

Setup

Appendix 15.1–15.10

ReferencesMarkdown · 8 files

Also bundledMarkdown · 2 files

About this skill

Colophon

Appendix 15.1–15.10

ReferencesMarkdown · 8 files

Also bundledMarkdown · 2 files