RouterHistory Interface | Vue Router

RouterHistory defines the contract for history management implementations. It abstracts URL manipulation and navigation for different history strategies. 📚

📋 Interface Definition

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

🎯 Purpose and Usage

The RouterHistory interface standardizes history management across different implementations:

• HTML5 History (createWebHistory()) - Clean URLs, requires server config
• Hash History (createWebHashHistory()) - Works with static servers
• Memory History (createMemoryHistory()) - For testing/SSR

🔍 Core Properties

router - Associated Router

Reference to the router instance.

base - Base URL

Application base path (e.g., "/my-app/").

location - Current Location

Normalized route location with reactive properties.

state - History State

Current history state object.

💡 Navigation Methods

push() - Add to History Stack

await history.push('/new-page')
await history.push({ name: 'user', params: { id: '123' } })

replace() - Replace Current Entry

await history.replace('/updated-page') // No back button history

Navigation Controls

history.go(-2)    // Go back 2 steps
history.back()    // Browser back equivalent  
history.forward() // Browser forward equivalent

🔧 Lifecycle Methods

listen() - History Change Listener

const unsubscribe = history.listen((location, action) => {
  console.log('History changed:', action, location.path)
})

// Clean up later
unsubscribe()

destroy() - Resource Cleanup

Cleans up event listeners and resources.

💡 Practical Examples

History Analytics

history.listen((location, action) => {
  analytics.track('navigation', {
    action,
    path: location.path,
    timestamp: Date.now()
  })
})

State Management

// Store data in history state
const currentState = history.state
window.history.replaceState({
  ...currentState,
  customData: 'value'
}, '')

🔗 Related APIs

• createWebHistory()
• createWebHashHistory()
• createMemoryHistory()

💡 Pro Tip: Choose history implementation based on deployment environment. Use hash history for static hosting, HTML5 history for server-controlled deployments.