前端路由历史栈结构

问题

前端路由 a -> b -> c 这样前进，也可以返回 c -> b -> a，用什么数据结构来存比较高效？

解答

使用**栈（Stack）**数据结构最合适。栈是后进先出（LIFO）的线性结构，天然符合路由历史的访问模式。

工作原理

前进过程：每访问一个新页面，将路由信息压入栈顶

const routeStack = [];

// 访问 a
routeStack.push('a'); // ['a']

// 访问 b
routeStack.push('b'); // ['a', 'b']

// 访问 c
routeStack.push('c'); // ['a', 'b', 'c']

后退过程：从栈顶弹出路由信息，显示前一个页面

// 从 c 返回 b
const current = routeStack.pop(); // 'c'
const previous = routeStack[routeStack.length - 1]; // 'b'
// routeStack: ['a', 'b']

// 从 b 返回 a
routeStack.pop(); // 'b'
const previous = routeStack[routeStack.length - 1]; // 'a'
// routeStack: ['a']

简单实现

class RouteHistory {
  constructor() {
    this.stack = [];
  }

  push(route) {
    this.stack.push(route);
  }

  back() {
    if (this.stack.length > 1) {
      this.stack.pop();
      return this.stack[this.stack.length - 1];
    }
    return null;
  }

  current() {
    return this.stack[this.stack.length - 1];
  }
}

关键点

• 栈的 push 和 pop 操作时间复杂度都是 O(1)，性能高效
• 后进先出的特性完美匹配路由的前进和后退逻辑
• 需要处理浏览器刷新、直接跳转等特殊场景
• 实际应用中可结合 History API 或 Hash 模式实现