一、点击浏览器的回退按钮 或者 通过页面交互切换路由-给出提示（直接手动改变url地址并不会触发）
场景：angular项目 + ng-zorro-antd UI组件库
技术点：使用CanDeactivate 路由守卫
具体实现：1、创建can-deactivate-guard.ts守卫文件
// import { Injectable } from "@angular/core";import { Observable } from "rxjs";import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";import { HeroDetailComponent } from "../hero-detail/hero-ponent"// @Injectable({// providedIn: 'root'// })export class CanDeactivateGuard implements CanDeactivate<HeroDetailComponent> {canDeactivate(component: HeroDetailComponent,route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | boolean {return component.leaveTip();}}
2、配置route.ts文件
import { NgModule } from "@angular/core";import { RouterModule, Routes } from "@angular/router";import { HeroesComponent } from "./heroes/ponent";import { DashboardComponent } from "./dashboard/ponent";import { HeroDetailComponent } from "./hero-detail/hero-ponent";import { CanDeactivateGuardService } from "./can-deactivate/can-deactivate-guard.service"; //注意在这里！！！const routes: Routes = [{ path: "heroes", component: HeroesComponent },{ path: "dashboard", component: DashboardComponent },{ path: "", redirectTo: "/dashboard", pathMatch: "full"},{ path: "detail/:id", component: HeroDetailComponent, canDeactivate: [CanDeactivateGuardService]} //注意在这里！！！]@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers: [CanDeactivateGuardService] //注意在这里！！！})export class AppRoutingModule {}
3、这里的leaveTip方法，我写在了需要弹出离开提示的组件里了，方法如下
import { Observable } from 'rxjs';import { NzModalService } from 'ng-zorro-antd/modal'···constructor(private modalService: NzModalService) { }···isSave=false;leaveTip() {return Observable.create((observer: any) => {if(!this.isSave) {this.modalService.confirm({nzTitle: '提示',nzContent:'您还有东西没有保存，是否退出？',nzOnOk: async () => {observer.next(true);},nzOnCancel: () => {observer.next(false);}})} else {observer.next(true);}})}···
二、刷新或关闭浏览器时-给出提示（注意兼容问题）
场景：js方法，angualr项目
技术点： 添加浏览器监听事件 beforeunload
具体实现：（在ngOnInit生命周期注册，在ngOnDestroy周期销毁）
windowCheck(e:any){e.preventDefault(); //浏览器不同支持程度不同e.returnValue = "你好" //为了兼容return "你好" //为了兼容}getWindowCheck(){// 浏览器关闭 或者 刷新 时调用window.addEventListener('beforeunload',this.windowCheck,true);}removeWindowCheck(){// 浏览器关闭 或者 刷新 时调用window.removeEventListener('beforeunload',this.windowCheck,true);}
三、其他-点击浏览器回退按钮
关于onpopstate，它是在浏览器已经回退后发生的，此时页面已经back了，只能给出简单的提示用户已退出上个页面。
window.onpopstate = () => {console.log('要离开吗')alert('您已经离开')}
如果觉得《离开当前页时给出一个弹窗提示确定要离开吗？》对你有帮助，请点赞、收藏，并留下你的观点哦！
