{"id":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","shortId":"yHBp43","kind":"skill","title":"vue-router-best-practices","tagline":"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.","description":"Vue Router best practices, common gotchas, and navigation patterns.\n\n### Navigation Guards\n- Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md)\n- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md)\n- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md)\n- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md)\n- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md)\n\n### Route Lifecycle\n- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md)\n- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md)\n\n### Setup\n- Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)","tags":["vue","router","best","practices","skills","antfu","agent-skills"],"capabilities":["skill","source-antfu","skill-vue-router-best-practices","topic-agent-skills","topic-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/vue-router-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add antfu/skills","source_repo":"https://github.com/antfu/skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 4987 github stars · SKILL.md body (1,263 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:46.279Z","embedding":null,"createdAt":"2026-04-18T20:24:51.832Z","updatedAt":"2026-05-18T18:52:46.279Z","lastSeenAt":"2026-05-18T18:52:46.279Z","tsv":"'4':8 'access':46 'api':62 'applic':138 'async':70 'await':65,71 'beforeent':41 'beforerouteent':50,55 'best':4,22 'build':133 'call':63 'chang':115 'cleanup':130 'common':24 'compon':17,47,123 'data':105 'deprec':91,100 'differ':36 'event':119 'function':93 'gotcha':25 'guard':11,30,51,60,69,84,89,98 'infinit':77,85 'instanc':48 'interact':19 'lifecycl':18,103,117 'listen':120 'loop':79,86 'make':61 'navig':10,27,29,31,59,83,88,97,107 'next':92,99 'page':137 'param':13,37,43,114 'pattern':9,28,72 'persist':121 'practic':5,23 'product':134,146 'redirect':78 'reference/router-beforeenter-no-param-trigger.md':45 'reference/router-beforerouteenter-no-this.md':58 'reference/router-guard-async-await-pattern.md':73 'reference/router-navigation-guard-infinite-loop.md':87 'reference/router-navigation-guard-next-deprecated.md':101 'reference/router-param-change-no-lifecycle.md':118 'reference/router-simple-routing-cleanup.md':131 'reference/router-use-vue-router-for-production.md':147 'rout':12,16,34,102,110,129 'route-compon':15 'router':3,7,21,40,54,68,82,96,113,127,141,144 'router-beforeenter-no-param-trigg':39 'router-beforerouteenter-no-thi':53 'router-guard-async-await-pattern':67 'router-navigation-guard-infinite-loop':81 'router-navigation-guard-next-deprec':95 'router-param-change-no-lifecycl':112 'router-simple-routing-cleanup':126 'router-use-vue-router-for-product':140 'see':38,52,66,80,94,111,125,139 'setup':132 'simpl':128 'singl':136 'single-pag':135 'skill' 'skill-vue-router-best-practices' 'source-antfu' 'stale':104 'topic-agent-skills' 'topic-skills' 'trap':75 'trigger':44 'unmount':124 'use':90,142 'user':74 'vue':2,6,20,143 'vue-router-best-practic':1 'without':64","prices":[{"id":"16603ec7-2772-4cdb-ae08-402e61941604","listingId":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"antfu","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:24:51.832Z"}],"sources":[{"listingId":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","source":"github","sourceId":"antfu/skills/vue-router-best-practices","sourceUrl":"https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices","isPrimary":false,"firstSeenAt":"2026-04-18T21:53:54.508Z","lastSeenAt":"2026-05-18T18:52:46.279Z"},{"listingId":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","source":"skills_sh","sourceId":"antfu/skills/vue-router-best-practices","sourceUrl":"https://skills.sh/antfu/skills/vue-router-best-practices","isPrimary":true,"firstSeenAt":"2026-04-18T20:24:51.832Z","lastSeenAt":"2026-05-07T22:40:15.666Z"}],"details":{"listingId":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"antfu","slug":"vue-router-best-practices","github":{"repo":"antfu/skills","stars":4987,"topics":["agent-skills","skills"],"license":"mit","html_url":"https://github.com/antfu/skills","pushed_at":"2026-05-01T16:46:24Z","description":"Anthony Fu's curated collection of agent skills.","skill_md_sha":"6488d42c50fbc4cae17b58bfd0a84e8c806cb9a5","skill_md_path":"skills/vue-router-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"vue-router-best-practices","license":"MIT","description":"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."},"skills_sh_url":"https://skills.sh/antfu/skills/vue-router-best-practices"},"updatedAt":"2026-05-18T18:52:46.279Z"}}