vue-router-best-practices
Vue Router best practices, common gotchas, and navigation patterns.
Navigation Guards
- Navigating between same route with different params → See router-beforeenter-no-param-trigger
- Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this
- Navigation guard making API calls without awaiting → See router-guard-async-await-pattern
- Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop
- Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated
Route Lifecycle
- Stale data when navigating between same route → See router-param-change-no-lifecycle
- Event listeners persisting after component unmounts → See router-simple-routing-cleanup
Setup
- Building production single-page application → See router-use-vue-router-for-production
More from xingyu4j/skills
vben
Vue Vben Admin monorepo 项目专家。适用于 Vben Admin 项目中的页面开发、组件使用、路由配置、API 定义、状态管理、适配器模式、国际化、权限控制等任务。支持所有应用变体(web-antd、web-ele、web-naive)和共享包。
24ruoyi-vue-pro
芋道源码 ruoyi-vue-pro 后端框架专家。适用于 Spring Boot 单体项目中的模块开发、Controller/Service/Mapper/DO/VO 编写、MyBatis Plus 数据访问、权限控制、多租户、数据权限、Excel 导出、定时任务等后端开发任务。
16using-superpowers
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
15vue
Vue 3 Composition API、script setup 宏、响应式系统和内置组件。适用于编写 Vue SFC、defineProps/defineEmits/defineModel、侦听器或使用 Transition/Teleport/Suspense/KeepAlive。
15web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
13pinia
Pinia 官方 Vue 状态管理库,类型安全且可扩展。适用于定义 store、处理 state/getters/actions 或在 Vue 应用中实现 store 模式。
13