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

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

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

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

下面是angular默認(rèn)路由復(fù)用策略，每切換一下路由，下面代碼都再默默的執(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當(dāng)前路由，切換路由時，我們在下文用future表示下一路由，curr表示當(dāng)前路由

shouldReuseRoute(future, curr)

retrieve(route)

shouldDetach(route)

store(route, detachedTree)

shouldAttach(route)

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

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

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

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

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

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

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

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

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

下面貼一個路由復(fù)用策略用例，應(yīng)該是滿足大部分人的業(yè)務(wù)要求，注意事項：只能是末級路由的緩存，且路由切換的時候路由節(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);
  }
}

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

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