技能 vue-router-best-practices
📦

vue-router-best-practices

v1.0.0 内容修订 r2 安全 ⚡ 包含脚本⚙️ 外部命令

提升 Vue Router 守卫可靠性

Vue Router 错误可能导致数据过期、检查被绕过和重定向循环。此技能提供针对安全守卫、路由更新、清理和生产路由的聚焦模式。

支持: Claude Codex Code(CC)
🥈 80 白银

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "vue-router-best-practices" from https://skillstore.io/skills/antfu-vue-router-best-practices.md and its manifest at https://skillstore.io/api/skills/antfu-vue-router-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/antfu-vue-router-best-practices.md 已签名 manifest GET /api/skills/antfu-vue-router-best-practices/manifest 已签名 lockfile GET /api/skills/antfu-vue-router-best-practices/lockfile

测试它

正在使用“vue-router-best-practices”。 某个路由使用 beforeEnter 保护用户资料，但用户可以切换资料 id 而不会再次检查。

预期结果:

该技能会解释为什么 beforeEnter 不会在同一路由的参数变化时运行，并推荐使用组件内更新守卫。

正在使用“vue-router-best-practices”。 某个身份验证守卫会将每个未认证用户重定向到登录路由，包括已经前往登录页的用户。

预期结果:

该技能会识别重定向循环风险，并建议排除公共路由或使用 route meta 检查。

正在使用“vue-router-best-practices”。 一个小型原型使用 hashchange 路由，并开始变成生产 SPA。

预期结果:

该技能会将简单路由的限制与 Vue Router 的功能进行比较，例如守卫、嵌套路由和懒加载。

安全审计

安全
v5 • 2026/7/23 打开版本化报告

All 15 static findings are false positives from documented Vue Router examples. Fixed local imports, JavaScript template literals, route checks, and framework warnings do not create execution or reconnaissance risks. No prompt injection or malicious intent was found.

11
已扫描文件
1,540
分析行数
0
复核项
0
已忽略误报

风险因素

⚡ 包含脚本 (6)
reference/router-beforerouteenter-no-this.md:131 reference/router-use-vue-router-for-production.md:75 reference/router-use-vue-router-for-production.md:81 reference/router-use-vue-router-for-production.md:87 reference/router-use-vue-router-for-production.md:94 reference/router-use-vue-router-for-production.md:100
⚙️ 外部命令 (2)
reference/router-navigation-guard-infinite-loop.md:155-164 reference/router-navigation-guard-infinite-loop.md:164-166
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/antfu-vue-router-best-practices/security.svg)](https://skillstore.io/skills/antfu-vue-router-best-practices?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/antfu-vue-router-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-vue-router-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/antfu-vue-router-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

github.com/vuejs-ai. (2026). vue-router-best-practices security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5

BibTeX 引用

@techreport{github-com-vuejs-ai-antfu-vue-router-best-practices-2026, author = {github.com/vuejs-ai}, title = {vue-router-best-practices security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vue-router-best-practices security audit report (audit version 5)" version: "1.0.0" type: report authors: - name: "github.com/vuejs-ai" date-released: "2026-07-23" url: "https://skillstore.io/skills/antfu-vue-router-best-practices/audits/5" identifiers: - type: other value: "skillstore:antfu-vue-router-best-practices:audit:5" description: "Skillstore immutable audit report identifier"

比较变体

2 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 使用量更高
github.com/vuejs-ai 推荐 当前

antfu-vue-router-best-practices

Skillstore 评分 80
证据置信度 高
Skillstore 使用量 24
已更新

2026-09-09

github.com/vuejs-ai

vuejs-ai-vue-router-best-practices

Skillstore 评分 80
证据置信度 高
Skillstore 使用量 21
已更新

2026-09-09

Skillstore 评分

评分依据 证据置信度: 高
55
架构
100
可维护性
87
内容
69
社区
83
规范符合性

你能构建什么

修复守卫绕过问题

审查参数或查询变化可能跳过预期 beforeEnter 检查的路由。

稳定身份验证导航

改进执行异步检查、重定向和错误处理的身份验证守卫。

准备 SPA 路由

从简单 hash 路由迁移到可维护的 Vue Router 生产环境设置。

试试这些提示

检查路由守卫 
审查我的 Vue Router 守卫中常见的错误。重点关注重定向、异步行为和路由参数变化。
修复过期路由数据 
帮我更新一个 Vue 组件，它在路由参数变化时仍保留过期数据。解释应使用的最佳模式。
设计身份验证导航 
设计一个 Vue Router 身份验证流程，包含公共路由、受保护路由、重定向查询、超时处理和循环预防。
审计路由架构 
审计这个 Vue Router 设置是否已准备好用于生产环境。涵盖懒加载、route meta、生命周期处理、清理和导航失败情况。

最佳实践

  • 当路由参数驱动显示数据时，使用组件内更新守卫或 watcher。
  • 等待异步导航检查，并返回明确的重定向或继续结果。
  • 使用 route meta 字段和公共路由集合来防止重定向循环。

避免

  • 依赖 beforeEnter 处理同一路由的参数或查询变化。
  • 启动异步身份验证检查却不等待其结果。
  • 在不检查导航是否已位于目标位置的情况下重定向到受守卫保护的路由。

常见问题

此技能面向哪个 Vue Router 版本？
它面向使用 Vue 3 应用模式的 Vue Router 4。
它能帮助处理身份验证守卫吗？
可以。它涵盖异步检查、重定向目标、公共路由、route meta 和循环预防。
它涵盖路由参数更新吗？
可以。它解释 watcher、onBeforeRouteUpdate，以及用于参数驱动数据的带 key 的 router views。
它能替代 Vue Router 文档吗？
不能。它提供聚焦的最佳实践和常见陷阱，但官方文档仍然是真实来源。
此技能对小型原型有用吗？
可以。它解释何时简单 hash 路由是可接受的，以及何时 Vue Router 是更好的选择。
它会直接执行代码或修改项目吗？
不能。它是文档指导，用于帮助 AI 助手审查和解释路由模式。

开发者详情

许可证

MIT

作者版本

v1.0.0

Skillstore 修订

r2

仓库

https://github.com/antfu/skills/tree/main/skills/vue-router-best-practices/

引用

89edfdc710d0846129dcee6a929477b04f08052c

维护新鲜度

2026/7/24

使用量

15 次下载 · 148 次浏览

文件结构

📄 LICENSE.md

📁 reference/

📄 router-beforeenter-no-param-trigger.md

📄 router-beforerouteenter-no-this.md

📄 router-guard-async-await-pattern.md

📄 router-navigation-guard-infinite-loop.md

📄 router-navigation-guard-next-deprecated.md

📄 router-param-change-no-lifecycle.md

📄 router-simple-routing-cleanup.md

📄 router-use-vue-router-for-production.md

📄 SKILL.md

📄 SYNC.md