[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MB8GK06M6GA4KVYNDV1BZP":3,"skill-same:01M6MB8GK06M6GA4KVYNDV1BZP":99},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":13,"repositoryHtmlUrl":43,"repositoryHomepageUrl":6,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":45,"updatedAt":46,"install":47,"resources":60},"01M6MB8GK06M6GA4KVYNDV1BZP","vue-router-best-practices",null,"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.","superhealth\u002Fskills-hub","superhealth","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6292112?v=4","01M6JA6E7F21BYK5W3E4P270TT","01M6JA6EC0W8MPHKDJVBZDSEZ0",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32],"best practices","vue","router","vue router best practices","github","component","lifecycle","navigation","patterns","route","2026-11-10 10:12:30",false,"---\nname: vue-router-best-practices\ndescription: \"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.\"\nversion: 1.0.0\nlicense: MIT\nauthor: github.com\u002Fvuejs-ai\n---\n\nVue 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\u002Frouter-beforeenter-no-param-trigger.md)\n- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference\u002Frouter-beforerouteenter-no-this.md)\n- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference\u002Frouter-guard-async-await-pattern.md)\n- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference\u002Frouter-navigation-guard-infinite-loop.md)\n- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference\u002Frouter-navigation-guard-next-deprecated.md)\n\n### Route Lifecycle\n- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference\u002Frouter-param-change-no-lifecycle.md)\n- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference\u002Frouter-simple-routing-cleanup.md)\n\n### Setup\n- Building production single-page application → See [router-use-vue-router-for-production](reference\u002Frouter-use-vue-router-for-production.md)\n","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\u002Frouter-beforeenter-no-param-trigger.md)\n- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference\u002Frouter-beforerouteenter-no-this.md)\n- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference\u002Frouter-guard-async-await-pattern.md)\n- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference\u002Frouter-navigation-guard-infinite-loop.md)\n- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference\u002Frouter-navigation-guard-next-deprecated.md)\n\n### Route Lifecycle\n- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference\u002Frouter-param-change-no-lifecycle.md)\n- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference\u002Frouter-simple-routing-cleanup.md)\n\n### Setup\n- Building production single-page application → See [router-use-vue-router-for-production](reference\u002Frouter-use-vue-router-for-production.md)\n",{"name":5,"author":38,"license":14,"version":39,"description":7},"github.com\u002Fvuejs-ai","1.0.0","master","08cc2532077058aa50e6e18f54695bc256c88152","skills\u002Fvuejs-ai\u002Fvue-router-best-practices","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub","https:\u002F\u002Fgithub.com\u002Fsuperhealth","java engineer","2026-04-06 22:07:23",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add superhealth\u002Fskills-hub --skill vue-router-best-practices",{"tool":53,"command":54},"bunx","bunx skills add superhealth\u002Fskills-hub --skill vue-router-best-practices",{"tool":56,"command":57},"pnpm","pnpm dlx skills add superhealth\u002Fskills-hub --skill vue-router-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",true,[61,67,71,75,79,83,87,91,95],{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"reference\u002Frouter-beforeenter-no-param-trigger.md","REFERENCE","参考文档",4916,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-beforeenter-no-param-trigger.md",{"path":68,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":69,"sourceHtmlUrl":70},"reference\u002Frouter-beforerouteenter-no-this.md",5022,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-beforerouteenter-no-this.md",{"path":72,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":73,"sourceHtmlUrl":74},"reference\u002Frouter-guard-async-await-pattern.md",5899,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-guard-async-await-pattern.md",{"path":76,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":77,"sourceHtmlUrl":78},"reference\u002Frouter-navigation-guard-infinite-loop.md",5491,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-navigation-guard-infinite-loop.md",{"path":80,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":81,"sourceHtmlUrl":82},"reference\u002Frouter-navigation-guard-next-deprecated.md",4277,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-navigation-guard-next-deprecated.md",{"path":84,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":85,"sourceHtmlUrl":86},"reference\u002Frouter-param-change-no-lifecycle.md",5061,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-param-change-no-lifecycle.md",{"path":88,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":89,"sourceHtmlUrl":90},"reference\u002Frouter-simple-routing-cleanup.md",5349,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-simple-routing-cleanup.md",{"path":92,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":93,"sourceHtmlUrl":94},"reference\u002Frouter-use-vue-router-for-production.md",5323,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-use-vue-router-for-production.md",{"path":96,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":97,"sourceHtmlUrl":98},"skill-report.json",11255,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Fskill-report.json",[100,126,151,167,191,209],{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":107,"publishedAt":33},"01M6MC9F3WHV8S8FZ2W4TRB0FE","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fzhanlincui\u002Fvercel-react-best-practices\u002FSKILL.md",[106],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[108,109,23,110,111,112,113,114,115,116,31,117,118,119,120,121,122,123,124,125],"vercel react best practices","react","react best practices","vercel","guidelines","data fetching","triggers","pages","next","refactoring","data","Optimization","code","tasks","react components","components","performance","writing",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":136,"publishedAt":33},"01M6MB8KWE1Q5A5KERR7RFTQWP","vue-testing-best-practices","Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-testing-best-practices\u002FSKILL.md",[132,135],{"categoryNo":133,"categoryName":134,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[137,138,24,23,139,140,141,142,28,27,31,143,144,145,146,147,148,149,150],"testing best practices","vue testing best practices","testing","e2e testing","e2e","testing patterns","test","playwright","vitest","for","utils","mocking","use","js",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":158,"publishedAt":33},"01M6MB8DQF21TZMQ9XC3745ERW","vue-pinia-best-practices","Pinia stores, state management patterns, store setup, and reactivity with stores.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-pinia-best-practices\u002FSKILL.md",[157],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[159,23,160,24,161,162,163,164,165,166,27,31],"vue pinia best practices","pinia","store","with","setup","management","state","state management",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":182,"publishedAt":33},"01M6MB8A7MC08747J9TV4GWQ9A","vue-options-api-best-practices","Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-options-api-best-practices\u002FSKILL.md",[173,174,177],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":178,"categoryName":179,"taxonomyType":180,"taxonomyTypeDesc":181},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[23,24,183,184,185,186,187,188,189,190,118,27],"api","vue options api best practices","options","context","style","methods","reference","only",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":198,"publishedAt":33},"01M6MB85ZTQC24Q04X49MM4YXN","vue-development-guides","A collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or Nuxt projects.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-development-guides\u002FSKILL.md",[197],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[199,200,24,201,202,203,23,27,117,204,146,205,206,207,208,150],"vue development guides","guides","development","collection","applications","apply","tips","project","nuxt","projects",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":218,"publishedAt":33},"01M6MB74Y75A2CTHRB3R1W78AD","vue-best-practices","MUST be used for Vue.js tasks. Strongly recommends Composition API with `\u003Cscript setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-best-practices\u002FSKILL.md",[215,216,217],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":178,"categoryName":179,"taxonomyType":180,"taxonomyTypeDesc":181},[23,24,219,220,146,221,162,222,206,185,25,223,149,224,160,225,183,121,226,27],"vue best practices","files","load","as","vite","work","Composition","ssr"]