单页应用路由设计心得：守护好你的「返回键」

wuwenzen@outlook.com (wuwj) — Sat, 15 Feb 2020 00:00:00 +0000

单页应用（SPA）带来了更流畅的交互体验，但也制造了一个经典问题：「返回键」不好使了。

用户点浏览器返回，结果直接退回登录页，心态爆炸；
或者在一个中台系统里，从列表点到详情、从详情点到编辑、再返回时，筛选条件全没了，只剩一个「空空如也」。

这篇文章就结合我自己踩过的坑，聊聊：如何在 SPA 里设计更「靠谱」的路由结构和返回行为。

1. 路由不是简单的 URL 映射

很多项目的路由配置看起来像这样：

const routes = [
  { path: '/list', component: List },
  { path: '/detail/:id', component: Detail },
];

能跑，但如果你问：

列表页的筛选条件放哪？
返回列表时要不要还原滚动位置？
详情页打开方式是「覆盖当前」还是「新标签页」？

这些问题路由本身没有回答。
所以对我来说，路由不仅仅是 path → component 的映射，它还应该承载一些页面行为约定。

2. 基本路由结构：从「业务模块」出发

在中后台项目里，我现在更倾向按「业务模块」来规划路由：

const routes = [
  {
    path: '/order',
    component: Layout,
    children: [
      { path: 'list', name: 'OrderList', component: OrderList },
      { path: 'detail/:id', name: 'OrderDetail', component: OrderDetail },
      { path: 'edit/:id', name: 'OrderEdit', component: OrderEdit },
    ],
  },
];

几个小习惯：

路径短而语义化：/order/list 比 /orderListPage 更统一。
给路由起 name：后面做编程式导航、标签页缓存都会用到。
模块下的子路由聚在一起：方便看清一个模块的整体结构。

3. 返回行为：列表页的「状态保留」

最常见的场景：

在订单列表页选择了各种条件，翻到第 4 页；
点进某个订单详情；
返回时希望停留在「刚才那一页 + 筛选条件」。

如果不做额外处理，很多 SPA 会出现：

前端架构 on Saiga

单页应用路由设计心得：守护好你的「返回键」

1. 路由不是简单的 URL 映射

2. 基本路由结构：从「业务模块」出发

3. 返回行为：列表页的「状态保留」