Angular取消导航时CanDeactivate Guard未隐藏浏览器URL问题

方法一：在CanDeactivate守卫中手动回滚URL #

1. 在CanDeactivate守卫类中注入Router，同时监听导航结束事件记录上一次成功跳转的URL。
2. 当用户取消导航时，调用router.navigateByURL()回到之前的URL，并设置skipLocationChange: true，恢复地址栏状态。

示例代码：

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  private previousUrl: string;

  constructor(private router: Router) {
    // 记录每次成功导航后的URL
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = event.urlAfterRedirects;
    });
  }

  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate().then((canLeave: boolean) => {
      if (!canLeave) {
        // 用户取消导航，回滚地址栏到之前的状态
        this.router.navigateByURL(this.previousUrl, { skipLocationChange: true });
        return false;
      }
      return true;
    });
  }
}

方法二：全局监听导航取消事件处理 #

在根组件（如AppComponent）中监听路由的navigationCancel事件，导航被取消时自动回滚地址栏：

示例代码：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationCancel, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private previousUrl: string;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 记录成功导航的URL
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.previousUrl = event.urlAfterRedirects;
    });

    // 导航被取消时回滚地址栏
    this.router.events.pipe(
      filter(event => event instanceof NavigationCancel)
    ).subscribe(() => {
      this.router.navigateByURL(this.previousUrl, { skipLocationChange: true });
    });
  }
}

原理说明 #

通过skipLocationChange: true进入页面时，Angular仅更新内部路由状态，不会同步到浏览器地址栏。当触发导航离开该页面时，Angular会先将当前页面的URL同步到地址栏，再执行守卫逻辑；若守卫返回false取消导航，地址栏会停留在当前页面的URL上。通过手动回滚到之前的URL并设置skipLocationChange: true，就能让地址栏恢复到导航触发前的隐藏状态。

内容的提问来源于stack exchange，提问作者Aakash Giri