RN Navigation vs Vue Router 的架构对比

@[toc]

很多团队同时做 Web 和 RN，经常会问：

"能不能把 Web 的路由思想用到 RN？"

答案是：能，但不能照抄。

一、本质差异先搞清楚

维度	Vue Router	RN Navigation
渲染模型	URL 驱动	Stack 驱动
页面状态	可刷新	内存状态
回退机制	浏览器	原生导航栈

二、Vue Router：声明式路由

{
  path: '/user/:id',
  component: User
}

特点：

• URL 即状态
• 刷新可恢复
• SEO 友好

三、RN Navigation：状态式导航

navigation.navigate('User', { id: 1 })

特点：

• 栈结构
• 页面常驻内存
• 强依赖生命周期

四、架构设计的根本不同

Vue

• 路由是"状态来源"
• 页面是"状态映射"

RN

• 页面是"状态容器"
• 导航是"页面切换器"

五、权限与导航的差异

Vue：

• 全局守卫
• URL 级别权限

RN：

• 页面跳转前校验
• 或导航栈拦截

六、Layout vs Navigator

• Vue：Layout 是组件
• RN：Navigator 本身就是 Layout

TabNavigator
 ├── StackNavigator
 │    ├── Screen

七、如何统一思维模型？

建议团队统一的是：

• "页面分层思想"
• "权限集中处理"
• "导航声明化"

而不是 API 本身。

八、总结一句话

Vue Router 管的是"URL 到页面"

RN Navigation 管的是"页面到页面"

理解这个差异，跨端架构设计就不会拧巴。