Angular使用路由复用实现返回上一个页面不刷新

       当从列表进入详情后再返回时我们期望是页面不刷新的。在我不知道路由复用之前想要实现这个功能，我的解决方案是把一些条件存在session中，然后在ngOnInit()中去读取session再应用到页面中，这样实现了假的不刷新，但是后来发现当列表中含有大量筛选条件时，如果继续使用session的话要存好多东西。然后我就搜了一下，发现有路由复用这个概念。

路由复用存在以下几个状态：

shouldReuseRoute

适用于在路由之间跳转时。
如果返回true, 那么不会进行跳转；如果返回false，才会跳转并且执行下面的方法。

shouldDetach

离开当前页面的时候调用的方法，会比落地页面的构造函数先执行。
如果返回true, 则会执行store方法。

store

储存返回不需要刷新的页面。

shouldAttach

判断是否恢复store储存的页面。
如果返回true的话，retrieve方法会被调用。

retrieve

返回之前存储的不需要刷新的页面

好了，开始上代码！

route-reuse.service.ts

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

export class ReuseService implements RouteReuseStrategy {
    storedRouteHandles = new Map<string, DetachedRouteHandle>();
    //用来判断跳转时是否需要存储页面
    from = '';
    to = '';
    //用来判断跳转时是否要读取之前存储的页面
    reuseFrom = '';
    reuseTo = '';

    shouldReuseRoute(from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot): boolean {
        if (from.routeConfig) {
            this.from = this.getPath(from);
        }
        if (to.routeConfig) {
            this.to = this.getPath(to);
        }
        return from.routeConfig === to.routeConfig;
    }

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // 判断是否执行store
        const f = (this.from === 'a' && this.to === 'c') ||
            (this.from === 'b' && this.to === 'c') ||
        if (f) {
            this.reuseFrom = this.to;
            this.reuseTo = this.from;
        }
        return f;
    }

    store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
        // 进行路由复用存储
        this.storedRouteHandles.set(this.getPath(route), detachedTree);
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        if (this.from === this.reuseFrom && this.to === this.reuseTo) {
            // 读取路由复用
            return this.storedRouteHandles.get(this.getPath(route)) as DetachedRouteHandle;
        } else {
            return null;
        }
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        if (this.reuseFrom && this.reuseTo && this.from && this.to) {
            return this.from === this.reuseFrom && this.to === this.reuseTo;
        } else {
            return false;
        }
    }

    private getPath(route: ActivatedRouteSnapshot): string {
        // 截取路由地址中最小子节点
        let url = route['_routerState'].url.split('/');
        return url[url.length - 1].split('?')[0];
    }
}

app,module.ts

import { RouteReuseStrategy } from "@angular/router";
import { ReuseService } from "./shared/services/route-reuse.service";
@NgModule({
  provides: [{ provide: RouteReuseStrategy, useClass: ReuseService}]
})

这样就可以实现了a页面或b页面进入c页面后返回不刷新，停留在跳转前的状态。