ionic 4 get previous route - JavaScript

在 Ionic 4 中，我们可以使用 Angular 的内置 Router 模块来获取前一个路由。

获取前一个路由

要获得原始路由路径和查询参数，您可以在目标组件的构造函数中设置以下代码：

import { Router, ActivatedRoute } from '@angular/router';

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute
) {}

ngOnInit() {
  const previousUrl = this.router.url;
  const queryParams = this.activatedRoute.snapshot.queryParams;
  
  console.log('Previous URL:', previousUrl);
  console.log('Query Params:', queryParams);
}

这样，您就可以在组件加载时获取前一个路由和查询参数。

使用订阅方法

如果您想在路由发生变化时获取前一个路由和查询参数，可以使用 Angular 的 router.events。将以下代码添加到组件的构造函数中：

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

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(event => {
    const previousUrl = this.router.url;
    const queryParams = this.router.parseUrl(event['url']).queryParams;
    
    console.log('Previous URL:', previousUrl);
    console.log('Query Params:', queryParams);
  });
}

在这种情况下，您将订阅路由事件，并在发生路由更改时获取前一个路由和查询参数。

结论

使用上述方法，您可以在 Ionic 4 中获取前一个路由和查询参数。请注意，这些方法均基于 Angular 的 Router 模块。