用途:在 Vue 2 或 Vue 3 项目中配置路由,实现动态路由、嵌套路由、命名路由,设置导航守卫(beforeEach、beforeResolve、afterEach),使用 router.push、router.replace 编程式导航,按需懒加载路由分包,以及用路由 meta 字段控制权限与布局。
主要能力:区分 Vue 版本对应不同 API——Vue 2 用 Vue Router 3.x,Vue 3 用 Vue Router 4.x。Vue 3 通过 createRouter、createWebHistory 创建路由实例;Vue 2 通过 Vue.use(VueRouter) 与 new VueRouter({ mode: 'history' }) 配置。支持动态路由参数(如 /users/:id 并配合 props: true)、children 嵌套路由、meta 标记 requiresAuth、导航守卫鉴权重定向、import() 懒加载大页面组件。
使用方式:先识别 Vue 版本,再选用对应 API 配置路由;添加鉴权与授权守卫;对大页面组件做懒加载。编程式导航可用 useRouter 获取实例,调用 router.push({ name: 'user', params: { id: '123' } })、router.replace('/home')、router.go(-1)。
最佳实践:集中管理路由守卫做权限校验;懒加载大页面;使用命名路由配 params/query 做类型安全导航;不在路由中存放敏感数据;优先使用 createWebHistory 获得干净 URL,并为 HTML5 history 模式配置服务端回退;用 meta 控制布局、面包屑与访问权限。
限制:资料未提供安装命令、版本兼容细节、性能数据或收费信息。参考文档见 https://router.vuejs.org/ 与 https://v3.router.vuejs.org/。