{"id":"dfa5cbe4-2ad0-4dba-a48e-043df0537a5a","shortId":"yHBp43","kind":"skill","title":"Vue Router Best Practices","tagline":"Skills skill by Antfu","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"],"capabilities":["skill","source-antfu","category-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/antfu/skills/vue-router-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under antfu/skills","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:40:11.774Z","embedding":null,"createdAt":"2026-04-18T20:24:51.832Z","updatedAt":"2026-04-24T00:40:11.774Z","lastSeenAt":"2026-04-24T00:40:11.774Z","tsv":"'access':35 'antfu':8 'api':51 'applic':127 'async':59 'await':54,60 'beforeent':30 'beforerouteent':39,44 'best':3,11 'build':122 'call':52 'category-skills' 'chang':104 'cleanup':119 'common':13 'compon':36,112 'data':94 'deprec':80,89 'differ':25 'event':108 'function':82 'gotcha':14 'guard':19,40,49,58,73,78,87 'infinit':66,74 'instanc':37 'lifecycl':92,106 'listen':109 'loop':68,75 'make':50 'navig':16,18,20,48,72,77,86,96 'next':81,88 'page':126 'param':26,32,103 'pattern':17,61 'persist':110 'practic':4,12 'product':123,135 'redirect':67 'reference/router-beforeenter-no-param-trigger.md':34 'reference/router-beforerouteenter-no-this.md':47 'reference/router-guard-async-await-pattern.md':62 'reference/router-navigation-guard-infinite-loop.md':76 'reference/router-navigation-guard-next-deprecated.md':90 'reference/router-param-change-no-lifecycle.md':107 'reference/router-simple-routing-cleanup.md':120 'reference/router-use-vue-router-for-production.md':136 'rout':23,91,99,118 'router':2,10,29,43,57,71,85,102,116,130,133 'router-beforeenter-no-param-trigg':28 'router-beforerouteenter-no-thi':42 'router-guard-async-await-pattern':56 'router-navigation-guard-infinite-loop':70 'router-navigation-guard-next-deprec':84 'router-param-change-no-lifecycl':101 'router-simple-routing-cleanup':115 'router-use-vue-router-for-product':129 'see':27,41,55,69,83,100,114,128 'setup':121 'simpl':117 'singl':125 'single-pag':124 'skill':5,6 'source-antfu' 'stale':93 'trap':64 'trigger':33 'unmount':113 'use':79,131 'user':63 'vue':1,9,132 'without':53","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-04-23T18:53:30.171Z"},{"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-04-24T00:40:11.774Z"}],"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","source":"skills_sh","category":"skills","skills_sh_url":"https://skills.sh/antfu/skills/vue-router-best-practices"},"updatedAt":"2026-04-24T00:40:11.774Z"}}