应借鉴 vue router 分层设计思想，解耦历史管理、匹配逻辑与视图渲染，提取路由状态机和声明式配置解析为通用内核，按平台实现 history 与 adapter 层，统一抽象 location 对象，剥离 vue 响应式依赖以支持多端通用。
直接基于 Vue Router 源码开发多端通用路由库，不建议从零“魔改”官方源码，而应借鉴其核心分层设计思想，解耦历史管理、匹配逻辑与视图渲染三部分，再按目标平台适配底层机制。
明确多端边界：先定义“通用”指哪些环境
Vue Router 的 abstract 模式 已为非浏览器环境提供基础支持（如 Node.js 服务端、Electron 主进程、小程序逻辑层），但真正通用需覆盖：
- Web 浏览器（hash / history / memory）
- 微信/支付宝小程序（无 DOM，URL 管理靠 SDK API）
- React Native（原生导航栈 + JS 路由状态同步）
- 桌面端（Electron 或 Tauri，需桥接原生窗口控制）
关键不是复用全部代码，而是提取 路由状态机 和 声明式配置解析 这两块稳定内核，其余交由平台适配层实现。
架构分层设计：照搬 Vue Router 的模块化思路
参考其 src 目录结构，你的库应划分为四个核心层：
- core：含 createMatcher、createRouteMap、RouteRecord、Location 等纯逻辑，不依赖任何平台 API
- history：按平台拆分子包 —— web-history、mp-history（小程序）、rn-history、desktop-history
- adapter：封装各端视图更新方式 —— Web 用 Vue 组件、小程序用 Page 构造器、RN 用 NavigationContainer
-
runtime：提供统一的 useRoute、useRouter、
等 API，内部自动代理到底层适配器
这样，新增一个平台只需实现 history + adapter，core 层完全复用，避免重复造轮子。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章