VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天我们从 Vue Router 宏观对照入手看看 Vue 中的路由组件、API 与入口结构经过 VuReact 编译后会变成什么样的 React 路由代码。另外本文仅展示部分路由组件与 API实际上完整适配还包括路由类型接口等更多内容详情请查阅 VuReact Router 文档。前置约定为避免示例冗余导致理解偏差先明确两个小约定文中 Vue / React 代码均为核心逻辑简写省略完整组件包裹、无关配置等内容默认读者已熟悉 Vue Router API 用法与核心行为。编译对照router 组件router-link/router-viewVue 的路由组件在 React 中被映射为vureact/router提供的适配组件。Vue 代码templaterouter-linkto/homeHome/router-linkrouter-view//templateVuReact 编译后 React 代码import{RouterLink,RouterView}fromvureact/router;return(RouterLink to/homeHome/RouterLinkRouterView//);RouterLink在 React 中同样支持字符串to、对象to、activeClassName、customRender等 Vue 风格用法RouterView负责渲染当前匹配路由组件并保持嵌套路由、路由守卫与元字段的执行顺序。路由配置createRouter historyVue Router 的创建方式在 VuReact 中保持语义一致但依赖会替换为vureact/router。Vue 代码import{createRouter,createWebHistory}fromvue-router;importHomefrom./views/Home.vue;exportdefaultcreateRouter({history:createWebHistory(),routes:[{path:/,component:Home},],});VuReact 编译后 React 代码import{createRouter,createWebHistory}fromvureact/router;importHomefrom./views/Home;exportdefaultcreateRouter({history:createWebHistory(),routes:[{path:/,component:Home},],});这说明createRouter/createWebHistory等 API 名称保持不变仅依赖路径会被替换成vureact/routerVue Router 的路由记录、嵌套路由、meta字段可直接保留。入口注入RouterProvider如果启用了自动适配VuReact 会在编译后自动调整入口文件将原App /替换为路由实例的RouterProvider。生成后的 React 入口文件import{StrictMode}fromreact;import{createRoot}fromreact-dom/client;import./index.css;importRouterInstancefrom./router/index;createRoot(document.getElementById(root)!).render(StrictModeRouterInstance.RouterProvider//StrictMode,);该入口结构体现了 Vue 路由到 React 路由适配的宏观变化Vue 的路由配置文件继续作为路由实例入口React 入口通过RouterProvider挂载路由上下文因此无需手动改写业务路由逻辑只需保证路由定义规范。运行时 APIuseRouter / useRouteVue 的组合式路由 API 在 React 中仍保留相同语义。Vue 代码constrouteruseRouter();constrouteuseRoute();constgoHome(){router.push(/home);};VuReact 编译后 React 代码import{useRouter,useRoute}fromvureact/router;constrouteruseRouter();constrouteuseRoute();constgoHomeuseCallback((){router.push(/home);},[router]);useRouter()与useRoute()仍然支持编程式导航、参数读取、meta等字段且使用方式与 Vue Router 组合式 API 语义保持一致。自动适配当编译器检测到项目中使用 Vue Router 时会自动将import ... from vue-router替换为import ... from vureact/router将路由配置文件产物变更为vureact/router的路由实例将入口文件自动改写为RouterProvider渲染。配置示例import{defineConfig}fromvureact/compiler-core;exportdefaultdefineConfig({router:{// 路由入口文件路径即调用并默认导出 createRouter() 的地方configFile:src/router/index.ts,},});手动适配以下方案为通用建议具体实现细节请开发者根据实际项目需求进行调整。当选项output.bootstrapVite或者router.autoSetup为false时自动适配不可用需要手动完成导出 Vue Router 的createRouter()实例在 React 入口文件中将原本渲染App /的代码替换为vureact/router路由实例所提供的RouterProvider /组件。手动适配的核心是保留 Vue Router 的路由定义与嵌套路由结构导出路由器实例替换 React 入口渲染方式。相关资源VuReact 官方文档https://vureact.topVuReact Router 文档https://router.vureact.top继续阅读上一篇defineAsyncComponent下一篇v-if/v-else/v-else-if如果你觉得本文对你理解 VuReact 有帮助欢迎点赞、收藏、关注