Skip to content

为什么使用 vmo-router ​

要解决的问题 ​

后台系统常在登录后取得菜单或页面配置:本地已有报表组件,后端决定哪些报表可见、路径和标题是什么。同一个组件可能生成多种业务页面。应用还需要在刷新后恢复动态路由,在页面切换时保留输入,在退出登录时清理旧账号的路由。

Vue Router 已提供路由匹配、动态注册、导航和守卫。vmo-router 在这些能力之上,把本地页面模板、动态配置、恢复和清理组织成统一流程,减少各业务模块重复实现。

与原生 Vue Router 的区别 ​

需求使用原生 Vue Router使用 vmo-router
后端配置对应本地组件应用自行映射并生成 RouteRecordRaw用模板键选组件,深度合并实例配置
注册未知名称后导航应用先 addRoute,再 pushpush/replace 可以携带模板配置按需注册
刷新恢复动态路由应用自行保存配置并重建注入同步 getter/setter,createRouter 时恢复
退出清理应用跟踪动态名称并同步各类缓存独立跟踪动态注册,清理后代和对应缓存
同模板不同页面的 KeepAlive应用自行安排组件名称和 include懒加载模板按实例路由名设置组件名,store 管理名单
未保存页面确认应用编写守卫及刷新监听提供确认回调、状态开关和生命周期监听

动态注册与懒加载本身是 Vue Router 的能力;组件实例缓存是 Vue 的能力。本库提供的是配置组织和状态同步,并不替代它们。

适合哪些项目 ​

适合页面由菜单配置驱动的后台、多种业务页面共享模板、需要刷新恢复动态页面的 Vue 3 应用。主要优势是组件留在本地、配置可序列化,以及注册、导航、恢复、清理共用同一份定义。

固定静态页面的简单应用可以直接使用 Vue Router。菜单渲染、标签页 UI、后端授权、账号隔离和业务数据保存仍由应用负责;本库不会执行后端传来的任意组件代码,也不会仅凭 meta 自动完成授权或 KeepAlive 接入。

继续阅读模板与动态路由、路由配置缓存、KeepAlive 页面缓存,或从快速开始运行最小示例。