RouterHistory 接口

RouterHistory 接口定义了历史记录管理器的核心功能，它是 Vue Router 三种历史模式（Web History、Hash History、Memory History）的共同基础。📚

📋 接口定义

interface RouterHistory {
  readonly router: Router | null
  base: string
  location: RouteLocationNormalizedLoaded
  state: HistoryState
  
  push(to: RouteLocationRaw): Promise<NavigationFailure | void>
  replace(to: RouteLocationRaw): Promise<NavigationFailure | void>
  go(delta: number): void
  back(): void
  forward(): void
  
  listen(callback: (location: RouteLocationNormalizedLoaded) => void): () => void
  destroy(): void
}

🎯 功能说明

这个接口就像是路由系统的"时间旅行机器"，负责：

1. 记录导航历史 - 跟踪用户访问过的所有路由
2. 提供导航方法 - 前进、后退、跳转等操作
3. 管理状态信息 - 保存路由相关的状态数据
4. 监听变化事件 - 响应路由变化并执行回调

🔧 属性详解

router - 关联的路由实例

类型	可读性	说明
Router | null	只读	与此历史记录关联的路由实例

base - 基础路径

类型	可读性	说明
string	读写	应用的基础路径，所有路由都基于此路径

location - 当前位置信息

类型	可读性	说明
RouteLocationNormalizedLoaded	只读	当前激活的路由位置信息

state - 历史状态

类型	可读性	说明
HistoryState	只读	浏览器历史记录的状态信息

🎮 方法详解

push() - 添加新记录并跳转

push(to: RouteLocationRaw): Promise<NavigationFailure | void>

功能：添加新的历史记录并导航到指定位置。

示例：

// 跳转到指定路径
history.push('/home')

// 带参数的跳转
history.push({ path: '/user', query: { id: 123 } })

// 处理跳转结果
history.push('/target').then(failure => {
  if (failure) {
    console.log('导航失败:', failure)
  }
})

replace() - 替换当前记录

replace(to: RouteLocationRaw): Promise<NavigationFailure | void>

功能：替换当前历史记录，不添加新记录。

示例：

// 替换当前路由（用户点击后退时会跳过这个页面）
history.replace('/login')

// 登录成功后替换到首页
history.replace({ path: '/', query: { loggedIn: true } })

go() - 相对跳转

go(delta: number): void

功能：在历史记录中相对当前位置跳转。

示例：

history.go(-1)  // 后退一页
history.go(1)   // 前进一页
history.go(-3)  // 后退三页

back() - 后退

back(): void

功能：后退到上一页，相当于 go(-1)。

示例：

history.back()  // 后退

forward() - 前进

forward(): void

功能：前进到下一页，相当于 go(1)。

示例：

history.forward()  // 前进

listen() - 监听变化

listen(callback: (location: RouteLocationNormalizedLoaded) => void): () => void

功能：监听路由位置变化，返回取消监听的函数。

示例：

// 开始监听
const unsubscribe = history.listen((location) => {
  console.log('路由变化了:', location.path)
})

// 取消监听
unsubscribe()

destroy() - 销毁实例

destroy(): void

功能：清理资源，销毁历史记录实例。

示例：

// 在组件卸载时销毁
onUnmounted(() => {
  history.destroy()
})

💡 实际应用

自定义导航逻辑

function smartNavigate(to) {
  // 检查是否需要特殊处理
  if (shouldReplaceInsteadOfPush(to)) {
    return history.replace(to)
  } else {
    return history.push(to)
  }
}

历史记录监听

// 监听所有路由变化
const stopListening = history.listen((newLocation, oldLocation) => {
  trackUserNavigation(newLocation, oldLocation)
})

// 在适当的时候停止监听
setTimeout(() => {
  stopListening()
}, 5000)

🔗 相关接口

• RouteLocationRaw - 路由位置参数类型
• RouteLocationNormalizedLoaded - 标准化路由位置

💡 专业建议：通常不需要直接操作 RouterHistory 实例，Vue Router 已经提供了更友好的 API（如 useRouter()）来封装这些功能。