[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CFS0N19MSJNTVM9AEQ7Z73":3,"skill-same:01M6CFS0N19MSJNTVM9AEQ7Z73":104},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":42,"repositoryHtmlUrl":43,"repositoryHomepageUrl":6,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":45,"install":46,"resources":59},"01M6CFS0N19MSJNTVM9AEQ7Z73","vue-router-best-practices",null,"Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.","rockcookies\u002Fskills","rockcookies","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F3498265?v=4","01M6CF9C16X3SDSKZX6ANH7HQM","Jacob He","01M6CF9C53JP821FCW6R9B00AJ",1,"MIT","https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31],"best practices","vue","router","vue router best practices","github","component","lifecycle","navigation","2026-11-10 10:12:30",false,"---\nname: vue-router-best-practices\ndescription: >-\n  Vue Router 4 patterns, navigation guards, route params, and route-component\n  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":37,"license":15,"version":38,"description":7},"github.com\u002Fvuejs-ai","1.0.0","main","c349be0704bffe54a7191d1412faf564b08983ca","skills\u002Fvuejs-ai\u002Fvue-router-best-practices",0,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills","https:\u002F\u002Fgithub.com\u002Frockcookies","2026-11-12 14:42:52",{"source":8,"skillName":5,"commands":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add rockcookies\u002Fskills --skill vue-router-best-practices",{"tool":52,"command":53},"bunx","bunx skills add rockcookies\u002Fskills --skill vue-router-best-practices",{"tool":55,"command":56},"pnpm","pnpm dlx skills add rockcookies\u002Fskills --skill vue-router-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",true,[60,66,70,74,78,82,86,90,94,98],{"path":61,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":64,"sourceHtmlUrl":65},"agents\u002Fopenai.yaml","REFERENCE","参考文档",103,"https:\u002F\u002Fgithub.com\u002Fgordo-v1su4\u002Fproject-stack-structure\u002Fblob\u002Fmain\u002F.hermes\u002Fskills\u002Fdiagnosing-bugs\u002Fagents\u002Fopenai.yaml",{"path":67,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":68,"sourceHtmlUrl":69},"reference\u002Frouter-beforeenter-no-param-trigger.md",4916,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-beforeenter-no-param-trigger.md",{"path":71,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":72,"sourceHtmlUrl":73},"reference\u002Frouter-beforerouteenter-no-this.md",5022,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-beforerouteenter-no-this.md",{"path":75,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":76,"sourceHtmlUrl":77},"reference\u002Frouter-guard-async-await-pattern.md",5899,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-guard-async-await-pattern.md",{"path":79,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":80,"sourceHtmlUrl":81},"reference\u002Frouter-navigation-guard-infinite-loop.md",5491,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-navigation-guard-infinite-loop.md",{"path":83,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":84,"sourceHtmlUrl":85},"reference\u002Frouter-navigation-guard-next-deprecated.md",4277,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-navigation-guard-next-deprecated.md",{"path":87,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":88,"sourceHtmlUrl":89},"reference\u002Frouter-param-change-no-lifecycle.md",5061,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-param-change-no-lifecycle.md",{"path":91,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":92,"sourceHtmlUrl":93},"reference\u002Frouter-simple-routing-cleanup.md",5349,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-simple-routing-cleanup.md",{"path":95,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":96,"sourceHtmlUrl":97},"reference\u002Frouter-use-vue-router-for-production.md",5323,"https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002Freference\u002Frouter-use-vue-router-for-production.md",{"path":99,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":102,"sourceHtmlUrl":103},"scripts\u002Fhitl-loop.template.sh","SCRIPT","脚本",1459,"https:\u002F\u002Fgithub.com\u002Fgordo-v1su4\u002Fproject-stack-structure\u002Fblob\u002Fmain\u002F.hermes\u002Fskills\u002Fdiagnosing-bugs\u002Fscripts\u002Fhitl-loop.template.sh",[105,129,143,164,178,201],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":32},"01M6WMNKD3Y4H9FGM8Q901F507","hierarchical-agents-md","层级 AGENTS.md \u002F README.md：init、update、audit、reorganize、trim。 初始化 Agent 指令、代码改动后同步文档、检查文档漂移、重组仓库文档层级、精简规则与 Skills。 Not for 写业务代码或生成文档站点。","https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fcustom\u002Fhierarchical-agents-md\u002FSKILL.md",[],[112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128],"hierarchical agents md","agents md","party","update","README","for","third-party","true","init","python","git","packages","change","maintenance","初始化","audit","文档",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":136,"publishedAt":32},"01M6CFS6BRTQPFZCDHQP97HYXR","vueuse-functions","Apply VueUse composables where appropriate to build concise, maintainable Vue.js \u002F Nuxt features.","https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvueuse\u002Fvueuse-functions\u002FSKILL.md",[135],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[137,138,28,139,140,141,25,142],"functions","vueuse functions","build","nuxt","https","js",{"skillNo":144,"name":145,"nameZh":6,"description":146,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":153,"publishedAt":32},"01M6CFS34MDQXZPAWQFE5D7VGT","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\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-testing-best-practices\u002FSKILL.md",[149,152],{"categoryNo":150,"categoryName":151,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[24,25,154,155,156,157,158,159,160,29,28,161,162,163,142],"testing best practices","testing","vue testing best practices","e2e testing","playwright","test","testing patterns","vitest","e2e","use",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":171,"publishedAt":32},"01M6CFRYN31RFQFTE41Z6DCGKE","vue-pinia-best-practices","Pinia stores, state management patterns, store setup, and reactivity with stores.","https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-pinia-best-practices\u002FSKILL.md",[170],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[24,25,172,173,28,174,175,176,177],"vue pinia best practices","pinia","state","state management","management","setup",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":193,"publishedAt":32},"01M6CFRW2DKXJHP05DYJ3P3Y2S","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\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-options-api-best-practices\u002FSKILL.md",[184,185,188],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":186,"categoryName":187,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":189,"categoryName":190,"taxonomyType":191,"taxonomyTypeDesc":192},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[25,194,24,195,196,197,198,28,199,200],"vue options api best practices","api","only","data","reference","methods","context",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":208,"publishedAt":32},"01M6CFRT7422CAPBDPHQN7F8AJ","vue-jsx-best-practices","JSX syntax in Vue (e.g., class vs className, JSX plugin config).","https:\u002F\u002Fgithub.com\u002Frockcookies\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvuejs-ai\u002Fvue-jsx-best-practices\u002FSKILL.md",[207],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[25,24,209,210,211,28,212],"vue jsx best practices","syntax","plugin","config"]