Angular及AngularJS ng-route中历史路由与当前路由对比问题

嘿，我来帮你解决这两个Angular相关的路由问题，都是日常开发里挺常见的场景：

在Angular里要对比历史路由和当前路由，最常用的就是借助Router服务的导航事件来实现，给你分享几种靠谱的方法：

• 监听NavigationEnd事件记录上一跳路由
  这是最直接的方式，每次路由导航完成后，我们可以记录下上一个路由，和当前路由做对比。代码示例如下：

  import { Component, OnInit } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent implements OnInit {
    private previousUrl: string | undefined;
  
    constructor(private router: Router) {}
  
    ngOnInit(): void {
      this.router.events.subscribe(event => {
        // 只处理导航完成的事件
        if (event instanceof NavigationEnd) {
          // 这里就能拿到上一个路由和当前路由了
          console.log('上一跳路由:', this.previousUrl);
          console.log('当前路由:', event.urlAfterRedirects);
          
          // 写你的对比逻辑，比如判断是否从列表页跳转到详情页
          if (this.previousUrl === '/list' && event.urlAfterRedirects === '/detail') {
            // 执行你需要的操作，比如记录状态、触发动画等
          }
  
          // 更新上一个路由为当前路由，供下次导航使用
          this.previousUrl = event.urlAfterRedirects;
        }
      });
    }
  }
  

• 维护完整路由历史数组
  如果你需要对比更早的历史路由（比如判断用户是否曾经访问过某个页面），可以自己维护一个数组来存储所有访问过的路由：

  import { Router, NavigationEnd } from '@angular/router';
  
  constructor(private router: Router) {
    const routeHistory: string[] = [];
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 避免重复添加相同路由（比如用户刷新页面）
        if (routeHistory[routeHistory.length - 1] !== event.urlAfterRedirects) {
          routeHistory.push(event.urlAfterRedirects);
        }
        // 对比当前路由和历史中的任意路由
        const hasVisitedDetail = routeHistory.includes('/detail');
        console.log('用户是否访问过详情页:', hasVisitedDetail);
      }
    });
  }
  

在AngularJS的ng-route体系里，我们可以通过监听路由变化事件，结合维护路由历史来实现需求，具体步骤如下：

• 在全局维护路由历史
  我们可以在app的run块里监听$routeChangeSuccess事件，记录所有访问过的路由，同时捕获返回时的上一跳信息：

  angular.module('yourApp')
    .run(['$rootScope', '$location', function($rootScope, $location) {
      // 初始化路由历史，把当前页面加入
      $rootScope.routeHistory = [$location.path()];
  
      $rootScope.$on('$routeChangeSuccess', function(event, currentRoute, previousRoute) {
        const currentPath = $location.path();
        // 避免重复添加（比如刷新页面）
        if ($rootScope.routeHistory[$rootScope.routeHistory.length - 1] !== currentPath) {
          $rootScope.routeHistory.push(currentPath);
        }
  
        // 判断是否是从详情页返回列表页的场景
        if (currentRoute.originalPath === '/list' && previousRoute?.originalPath === '/detail') {
          // 标记用户曾来过列表页，这里可以存在$rootScope或者localStorage里
          $rootScope.hasVisitedList = true;
          // 要是需要持久化（页面刷新后仍有效），就存到localStorage
          localStorage.setItem('hasVisitedList', 'true');
        }
      });
    }]);
  

• 在列表页控制器中判断访问状态
  回到列表页时，我们可以读取之前标记的状态，执行对应的逻辑：

  angular.module('yourApp')
    .controller('ListController', ['$rootScope', function($rootScope) {
      // 先从localStorage读取（如果用了持久化），再 fallback 到$rootScope
      const hasVisited = localStorage.getItem('hasVisitedList') === 'true' || $rootScope.hasVisitedList;
      
      if (hasVisited) {
        console.log('用户之前来过这个列表页哦！');
        // 这里可以做你需要的操作，比如恢复上次的滚动位置、显示欢迎提示等
      }
    }]);
  

• 额外提示
  要是你只想判断用户是否通过返回按钮回到列表页，还可以结合$window的popstate事件，因为浏览器返回按钮会触发这个事件：

  angular.module('yourApp')
    .controller('ListController', ['$window', '$scope', function($window, $scope) {
      const handlePopState = () => {
        console.log('用户通过返回按钮回到了列表页！');
        // 执行你的逻辑
      };
  
      $window.addEventListener('popstate', handlePopState);
      
      // 记得在控制器销毁时移除监听，避免内存泄漏
      $scope.$on('$destroy', () => {
        $window.removeEventListener('popstate', handlePopState);
      });
    }]);
  

内容的提问来源于stack exchange，提问作者Generall Omosco