关于angular2跳路由防止页面刷新的做法（Angular2路由重载）

simpleReuseStrategy.ts

// 创建重用策略
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';

/**
 * 路由重用策略
 */
export class SimpleReuseStrategy implements RouteReuseStrategy {

    // 保存路由快照
    // [key:string] 键为字符串类型
    // DetachedRouteHandle 值为路由处理器
    // public  handlers: { [key: string]: DetachedRouteHandle } = {};
    public static handlers: { [key: string]: DetachedRouteHandle } = {};

    public static deleteRouteSnapshot(path?: string): void {
        if (!path) {
            SimpleReuseStrategy.handlers = {};
            return;
        }
        const name = path.replace(/\//g, '_');
        if (SimpleReuseStrategy.handlers[name]) {
            delete SimpleReuseStrategy.handlers[name];
        }
    }
    /**
     * 从缓存中获取快照
     * @param {ActivatedRouteSnapshot} route
     * @return {DetachedRouteHandle | null}
     */
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        return SimpleReuseStrategy.handlers[route.routeConfig.path];
    }

    /**
     * 是否允许还原
     * @param {ActivatedRouteSnapshot} route
     * @return {boolean} true-允许还原
     */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !! SimpleReuseStrategy.handlers[route.routeConfig.path];
    }

    /**
     * 确定是否应该分离此路由（及其子树）以便以后重用
     * @param {ActivatedRouteSnapshot} route
     * @return {boolean}
     */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return route.data.reload === false;
    }

    /**
     * 进入路由触发, 判断是否为同一路由
     * @param {ActivatedRouteSnapshot} future
     * @param {ActivatedRouteSnapshot} curr
     * @return {boolean}
     */
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        // future - 未来的(下一个)路由快照
        return future.routeConfig === curr.routeConfig;
    }

    /**
     * 保存路由
     * @param {ActivatedRouteSnapshot} route
     * @param {DetachedRouteHandle | null} handle
     */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
        // 通过 Route.path 映射路由快照, 一定要确保它的唯一性
        // 也可以通过 route.routeConfig.data.uid 或其他可以确定唯一性的数据作为映射key
        // 作者这里能够确保 path 的唯一性
        SimpleReuseStrategy.handlers[route.routeConfig.path] = handle;
    }

}

在app.module.ts里面引入和配置

 providers: [
        { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy },
        { provide: NZ_I18N, useValue: en_US },
        ConfigService, HttpInterceptorProviders
    ],

在相应模块的module里面路由配置末尾加上data: {reload: false}实现路由重载

const routes: Routes = [
    {
        path: '',
        component: AuthorityManagementComponent,
        children: [
            { path: '', redirectTo: 'authority-manage', pathMatch: 'full' },
            { path: 'authority-manage', component: AuthorityManageComponent, data: {reload: false} }, // 路由重载
            { path: 'add-authority', component: AddAuthorityComponent, data: {reload: false} },
            { path: 'follow-setting', component: FollowSettingComponent, data: {reload: false} },
            { path: 'order-setting', component: OrderSettingComponent, data: {reload: false} },
            { path: 'refund-setting', component: RefundSettingComponent, data: {reload: false} },
            { path: 'sales-setting', component: SalesSettingComponent, data: {reload: false} }
        ]
    }
];

关于angular2跳路由防止页面刷新的做法（Angular2路由重载）

原文：https://www.cnblogs.com/yuanchao-blog/p/12357362.html