摘要：一個路由復用策略用例下面貼一個路由復用策略用例，應該是滿足大部分人的業(yè)務要求，注意事項只能是末級路由的緩存，且路由切換的時候路由節(jié)點上的不能超過兩個。

關于路由復用策略網上的文章很多，大多是講如何實現(xiàn)tab標簽切換歷史數據，至于如何復用的原理講的都比較朦朧，代碼樣例也很難適用各種各樣的路由配置，比如懶加載模式下多級嵌套路由出口網上的大部分代碼都會報錯。
我希望能通過這篇文章把如何復用路由的原理講明白，讓小伙伴能明明白白的實用路由復用策略，文字中有不詳實和錯誤的地方歡迎小伙伴批評指正

路由復用策略的是對路由的父級相同節(jié)點的組件實例的復用，我們平時看到的多級嵌套路由切換時上層路由出口的實例并不會從新實例化就是因為angular默認的路由復用策略在起作用，而我們從寫路由復用策略能實現(xiàn)很多事情，其中之一就是實現(xiàn)
歷史路由狀態(tài)（數據）的存儲，即jquery時代的tab頁簽和iframe實現(xiàn)操作歷史的切換。

我一開始認為路由復用策略就是對歷史路由數據的復用策略,這個錯誤的觀念導致我對路由復用策略接口方法理解起來異常困難，不知小伙伴和我犯沒犯同樣的錯誤。觀念正確了，下面就理解起來比較方便了，寫路由復用策略也就比較順手了。

下面是angular默認路由復用策略，每切換一下路由，下面代碼都再默默的執(zhí)行。

export class DefaultRouteReuseStrategy {
    shouldDetach(route) { return false; }
    store(route, detachedTree) { }
    shouldAttach(route) { return false; }
    retrieve(route) { return null; }
    shouldReuseRoute(future, curr) {
        return future.routeConfig === curr.routeConfig;
    }
}

開始文章前我們先了解幾個觀念概念

我們的路由是棵樹，RouterModule.forRoot(Routes)，RouterModule.forChild(Routes)這些配置最后形成一個完整的路由樹，路由樹有個根是沒有routeConfig的,routeConfig是我們寫的每個route。

路由節(jié)點，一個路徑是由幾個路由節(jié)點組成，有的route配置了component，有的則沒有

future下一路由, curr當前路由，切換路由時，我們在下文用future表示下一路由，curr表示當前路由

shouldReuseRoute(future, curr)

retrieve(route)

shouldDetach(route)

store(route, detachedTree)

shouldAttach(route)

retrieve,取決一上一步的返回值

store(route, detachedTree),取決第五步

shouldReuseRoute()決定是否復用路由，根據切換的future curr的節(jié)點層級依次調用，返回值為true時表示當前節(jié)點層級路由復用，然后繼續(xù)下一路由節(jié)點調用，入參為切換的下一級路由（子級）的future curr路由的節(jié)點，返回值為false時表示不在復用路由，并且不再繼續(xù)調用此方法（future路由不再復用，其子級路由也不會復用，所以不需要再詢問下去），root路由節(jié)點調用一次，非root路由節(jié)點調用兩次這個方法，第一次比較父級節(jié)點，第二次比較當前節(jié)點，

retrieve()接上一步奏，當當前層級路由不需要復用的時候，調用一下retrieve方法，其子級路由也會調用一下retrieve方法，如果返回的是null，那么當前路由對應的組件會實例化，這種行為一直持續(xù)到末級路由。

shouldDetach是對上一路由的數據是否實現(xiàn)拆離，其調用開始是當前層級路由不需要復用的時候，即shouldReuseRoute()返回false的時候，如果這時候反回false，將繼續(xù)到上一路由的下一層級調用shouldDetach,直到返回true或者是最末級路由后才結束對shouldDetach的調用，當返回true時就調用一次store 方法，請看下一步奏

store存儲路分離出來的上一路由的數據，當 shouldDetach返回true時調用一次，存儲應該被分離的那一層的路由的DetachedRouteHandle。注意：無論路由樹上多個含有組件component路由節(jié)點，能分離出來的只能有一個，被存儲的也只能有一個，感覺這種機制對使用場景有很大限制。

shouldAttach是對當前路由的數據是否實現(xiàn)恢復（附加回來），其調用開始是當前層級路由不需要復用的時候，即shouldReuseRoute()返回false的時候，這和shouldDetach的調用時機很像，但是，并不是所有的路由層級都是有組件實例的，只有包含component的route才會觸發(fā)shouldAttach，如果反回false，將繼續(xù)到當前路由的下一帶有component的路由層級調用shouldAttach,直到返回true或者是最末級路由后才結束對shouldAttach
的調用，當返回true時就調用一次retrieve 方法，如果retrieve方法去獲取一下當前路由的DetachedRouteHandle,返回一個DetachedRouteHandle，就再調用一次store,再保存一下retrieve返回的DetachedRouteHandle。注意注意：無論路由樹上多個含有組件component路由節(jié)點，能恢復數據的只能有一個節(jié)點，這和shouldDetach是一個套路，對使用場景有很大限制。

路由復用策略這種調用機制對使用場景限制很大 ，比如多級路由出口嵌套就無法實現(xiàn)路由數據緩存。因為多級路由出口嵌套的應用切換路由時，前后路由會包含多個帶component的路由節(jié)點，而每次對路由的存儲和恢復只能存儲和恢復某一個節(jié)點的component的DetachedRouteHandle，其他路由節(jié)點上的component就是被從新實例化。明白這一點后我就放棄了想寫一個可以適用任何場景的路由復用策略的想法，如果有小伙伴能解決好這一業(yè)務場景，歡迎賜教。

如果這個路由復用策略可以存儲一個路由上多個節(jié)點的DetachedRouteHandle，和恢復多個節(jié)點的DetachedRouteHandle，應該能解決上面是的多級路由出口嵌套場景，但不知道會不會帶來別的問題。

下面貼一個路由復用策略用例，應該是滿足大部分人的業(yè)務要求，注意事項：只能是末級路由的緩存，且路由切換的時候路由節(jié)點上的component不能超過兩個。

import {ActivatedRouteSnapshot, DetachedRouteHandle, Route, RouteReuseStrategy} from "@angular/router";

export class CustomerReuseStrategy implements RouteReuseStrategy {
  static handlers: Map = new Map();
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return !route.firstChild;
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!CustomerReuseStrategy.handlers.has(route.routeConfig);
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
    return curr.routeConfig === future.routeConfig;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
     if (!!route.firstChild) {
          return null;
        }
    return CustomerReuseStrategy.handlers.get(route.routeConfig);
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    CustomerReuseStrategy.handlers.set(route.routeConfig, handle);
  }
}

很精簡，但是很好用，小伙伴可以根據自己的業(yè)務邏輯進行改造。

如果感覺這篇文章對你有幫助，請點個贊吧