开发规范需要联网github未标认证来源可访问许可证需确认审计通过

vue-router-best-practices（Vue router 最佳实践）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

286,416

周安装

11,693

GitHub Stars

4,838

下载量

92,664

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：vue-router-best-practices（Vue router 最佳实践）
来源仓库：https://github.com/antfu/skills
仓库路径：skills/vue-router-best-practices
安装命令：
npx skills add https://github.com/antfu/skills --skill vue-router-best-practices
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/antfu/skills --skill vue-router-best-practices

简介

Vue Router 4 模式、导航守卫和路由生命周期最佳实践。

涵盖五种导航保护模式，包括异步/等待处理、已弃用的 next() 函数迁移、无限重定向循环和参数更改检测
解决了在相同路由之间导航时的路由生命周期问题，例如过时数据以及组件卸载时的事件侦听器清理
包括 beforeRouteEnter 防护中的生产 SPA 设置指南和组件实例访问模式

SKILL.md

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

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.1%

按下载量换算32,525

Claude

30.19%

按下载量换算27,975

Cursor

22.14%

按下载量换算20,516

Gemini CLI

9.18%

按下载量换算8,507

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/antfu/skills

SKILL.md 来源

github.com

/antfu/skills/tree/main/skills/vue-router-best-practices

skills-sh

skills.sh

/antfu/skills/vue-router-best-practices

继续浏览同类 Skills

更多开发规范 Skills（1,265）返回 Skills 目录

上一个 Skill

vue-pinia-best-practices（Vue pinia 最佳实践）

下一个 Skill

vue-router-best-practices（Vue router 最佳实践）