用途
本技能用于在 Vue 项目中提供 Vue Router 的完整指导,适用于以下场景:
- 在 Vue 项目中配置路由、动态路由、守卫与懒加载
- 使用 Vue Router 4(Vue 3)或 Vue Router 3.x(Vue 2)的 API
主要能力
技能内容涵盖两方面:
配置: createRouter、routes、history 模式;router-link、router-view、useRouter。
进阶: 动态路由、嵌套路由、beforeEach 守卫、meta;懒加载写法 component: () => import()。
使用方式
依据本项目描述,结合官方文档 https://router.vuejs.org/ 进行路由相关开发。基础配置使用 createRouter 定义 routes 与 history 模式,模板中通过 router-link、router-view 渲染,组合式 API 中使用 useRouter 获取路由实例;进阶场景使用动态路由、嵌套路由、beforeEach 守卫与 meta 字段,并对大页面采用 component: () => import() 的懒加载写法。
最佳实践
- 路由与权限在守卫中集中处理;大页面懒加载。
- 命名路由与 params/query 规范;避免在路由中存敏感数据。
适用场景与限制
适用于 Vue 3(Vue Router 4)与 Vue 2(Vue Router 3.x)的路由开发。关于具体版本兼容性差异、安装命令及更多细节,资料中未提供,建议以官方文档 https://router.vuejs.org/ 为准。