Vue Router 最佳实践

# Vue Router 最佳实践

Vue Router 4 的常用模式、导航守卫实践与路由生命周期注意事项。

## 导航守卫

- **相同路由不同参数时的导航**：参见 [router-beforeenter-no-param-trigger](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-beforeenter-no-param-trigger.md)
- **在 `beforeRouteEnter` 中访问组件实例**：参见 [router-beforerouteenter-no-this](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-beforerouteenter-no-this.md)
- **导航守卫中发起异步请求但未正确 `await`**：参见 [router-guard-async-await-pattern](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-guard-async-await-pattern.md)
- **用户陷入无限重定向循环**：参见 [router-navigation-guard-infinite-loop](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-navigation-guard-infinite-loop.md)
- **使用已废弃的 `next()` 函数**：参见 [router-navigation-guard-next-deprecated](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-navigation-guard-next-deprecated.md)

## 路由生命周期

- **在相同路由间切换（仅参数变化）导致数据陈旧**：参见 [router-param-change-no-lifecycle](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-param-change-no-lifecycle.md)
- **组件卸载后事件监听器未清理**：参见 [router-simple-routing-cleanup](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-simple-routing-cleanup.md)

## 生产环境配置

- **构建生产级单页应用（SPA）**：参见 [router-use-vue-router-for-production](https://github.com/antfu/skills/blob/HEAD/skills/vue-router-best-practices/reference/router-use-vue-router-for-production.md)