本技能为 Vue Router v4 提供使用指引。当用户需要在 Vue 3 应用中设置路由、配置路由/嵌套路由/命名路由、实现导航守卫(全局、单路由、组件内)、使用 router.push()、router.replace() 等编程式导航、处理动态路由匹配与路由参数、使用路由元信息与路由记录、为路由实现懒加载与代码分割、结合组合式 API(useRouter、useRoute)、配置不同历史模式(hash、HTML5 history、memory)、处理滚动行为与过渡、使用 TypeScript 类型化路由、从 Vue Router 3 迁移到 v4、扩展 RouterLink 组件、处理导航失败与错误、以及运行时动态添加/移除路由时,可使用本技能。
技能按 Vue Router 官方文档结构(https://router.vuejs.org/guide/、https://router.vuejs.org/api/)组织。使用方式:先根据用户请求识别主题,再加载 examples/ 目录下对应示例文件。基础主题位于 examples/essentials/,包括:getting-started(创建路由与基本设置)、dynamic-route-matching(带 params 的动态路由匹配)、routes-matching-syntax(路由匹配语法与模式)、named-routes(命名路由与导航)、nested-routes(嵌套路由与 RouterView)、programmatic-navigation(使用 router 方法编程式导航)、named-views(命名视图与多个 RouterView)、redirect-alias(重定向与别名)、passing-props(向路由组件传递 props)、different-history-modes(hash、HTML5 history 与 memory 模式)。高级主题位于 examples/advanced/,包括:navigation-guards(全局、单路由与组件内守卫)、route-meta-fields(路由元信息与自定义数据)、data-fetching(数据获取策略)、composition-api(在组合式 API 中使用 useRouter() 与 useRoute())、routerview-slot(RouterView 插槽 props)、transitions(路由过渡与动画)、scroll-behavior(滚动行为配置)、lazy-loading-routes(懒加载路由与代码分割)、typed-routes(TypeScript 类型化路由)、extending-router-link(扩展 RouterLink 组件)、navigation-failures(处理导航失败)、dynamic-routing(动态添加与移除路由)。
API 参考位于 api/ 目录:router.md(Router 实例 API,如 createRouter()、addRoute()、removeRoute() 等,以及 push()、replace()、go()、back()、forward()、currentRoute、options)、route-records.md(路由记录类型与属性、路由配置选项)、useRouter-useRoute.md(组合式 API 函数)、navigation-helpers.md(导航辅助函数与工具)、router-link-router-view-components.md(RouterLink 与 RouterView 组件 props 及用法)、history-modes-api.md(createWebHistory()、createWebHashHistory()、createMemoryHistory())、error-and-failure-types.md(导航失败类型与错误处理)。模板位于 templates/ 目录:router-setup.md(路由器设置模板)、route-config.md(路由配置模板)。
技能说明指出:所有示例遵循 Vue Router 4 API;示例在适用处同时包含 JavaScript 与 TypeScript 版本;每个示例文件包含关键概念、代码示例与要点;应始终查看示例文件以了解最佳实践与常见模式。技能列出的最佳实践包括:使用命名路由提升可维护性与重构便利;对路由组件使用动态导入实现代码分割与懒加载;使用 TypeScript 与类型化路由提升类型安全;恰当使用导航守卫(全局、单路由、组件内);使用路由元字段存放自定义数据与权限;根据部署环境选择合适的历史模式;配置滚动行为以改善用户体验;优雅地处理导航失败。
资源链接包括官方指南 https://router.vuejs.org/guide/、API 参考 https://router.vuejs.org/api/、迁移指南 https://router.vuejs.org/guide/migration/、GitHub 仓库 https://github.com/vuejs/router。技能关键词涵盖路由、导航、路由守卫、嵌套路由、命名路由、动态路由、编程式导航、懒加载、类型化路由等。关于具体安装命令、收费与价格信息,资料中暂未提供。