彻底弄懂 Angular RouteReuseStrategy 路由复用策略

Angular 路由复用策略 RouteReuseStrategy 实现动态路由tab切换 在线Live

关于路由复用一直没有弄懂，网上的代码也是说的很朦胧，自己也一直没有弄懂。今天从调用顺序一步步开始，以及如何做路由存储给你们做个详细讲解。附上tab切换，以及自动生成新tab的demo（gihub代码已经托管了），希望可以帮助到爱学习的你们。

引言

路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；当然在绝大多数场景下这是合理的。

但是有时候也会有一些特殊的需求（一切是为了用户体验）；一种常见的现象，用户来到管理页面A，里面有很多任务，点击任务进入某个详情页面了，然后一个后退…用户懵逼了

RouteReuseStrategy

RouteReuseStrategy 大家都称它为：路由复用策略；并不复杂，提供了几种办法通俗易懂的方法：

• shouldDetach 是否允许复用路由
• store 当路由离开时会触发，存储路由
• shouldAttach 是否允许还原路由
• retrieve 获取存储路由
• shouldReuseRoute 进入路由触发，是否同一路由时复用路由
  
  

路由复用策略方法调用顺序

但看觉得很难懂，所以我画了个流程图，从执行顺序一步步来给你们讲解，希望你们可以弄懂
shouldReuseRoute(future, curr)
retrieve(route)
shouldDetach(route)
store(route, detachedTree)
shouldAttach(route)
retrieve 取决于上一步的返回值 false没有此步骤
store(route, detachedTree) 同样取决于第五步，false没有此步骤

路由复用策略方法执行顺序分布讲解

假设我们从路由A ——> 路由B

1、shouldReuseRoute(future, curr) 决定是否复用路由?

根据切换的future curr的节点层级依次调用。
返回值为true时表示当前节点层级路由复用，然后继续下一路由节点调用，入参为切换的下一级路由（子级）的future curr路由的节点。
返回值为false时表示不在复用路由，并且不再继续调用此方法（future路由不再复用，其子级路由也不会复用，所以不需要再询问下去）。
root路由节点调用一次，非root路由节点调用两次这个方法，第一次比较父级节点，第二次比较当前节点，

2、retrieve(route)

接上一步骤，当当前层级路由不需要复用的时候，调用一下这个方法，其子级路由也会调用一下retrieve方法。如果返回的是null，那么当前路由对应的组件会实例化，这种行为一直持续到末级路由。

3、shouldDetach(route)
对上一路由是否实现复用功能，如果返回true，调用一下store方法存储路由组件，如果返回false，那么先判断有没有层级路由，有的话继续执行shouldDetach方法，没有的话则跳过第四步骤，执行第五步骤

4、store(route, handle)
接上一步骤，如果离开路由A的时候，shouldDetach返回true了，那么离开路由A后，路由A引用的组件你就可以在这里存储起来，下一次回到路由A的时候，就可以拿到

5、shouldAttach(route)
当前路由是不是允许还原回来？如果配置允许，返回true，然后调用retrieve方法获取存储组件，反之返回false，就此结束

6、retrieve(route)
上一步返回true了，那么说明路由时允许还原的。我们在这一步骤里面，拿到我们之前为这个路由缓存的数据，返回即可。

7、store(route, handle)
拿完后，再调用一次store方法，这里，就此，整个路由复用策略就结束了。

在线demo

在线live RouteReuseStrategy-demo

github源码

RouteReuseStrategy-demo