@gluonjs/router / packages/router/src / RouterHistory
Interface: RouterHistory
Properties
base
readonlybase:string
location
readonlylocation:HistoryLocation
Methods
createHref()
createHref(
location):string
Parameters
location
string
Returns
string
destroy()
destroy():
void
Returns
void
go()
go(
delta,triggerListeners?):void
Parameters
delta
number
triggerListeners?
boolean
Returns
void
listen()
listen(
listener): () =>void
Parameters
listener
Returns
() => void
push()
push(
location,state?):void
Parameters
location
string
state?
Readonly<Record<string, unknown>>
Returns
void
replace()
replace(
location,state?):void
Parameters
location
string
state?
Readonly<Record<string, unknown>>
Returns
void
saveScroll()
saveScroll(
position):void
Parameters
position
Returns
void
Example
Drive Router-compatible location state through push, replace, traversal, listener, scroll, href, and cleanup operations:
import {
createMemoryHistory,
createWebHashHistory,
createWebHistory,
type HistoryListener,
type HistoryLocation,
type HistoryNavigation,
type HistoryState,
type RouterHistory,
type ScrollPosition,
} from '@gluonjs/router';
const state = { source: 'catalog' } satisfies HistoryState;
const scroll = { left: 0, top: 640 } satisfies ScrollPosition;
const history: RouterHistory = createMemoryHistory(['/shop', '/products/42']);
const listener: HistoryListener = (to: HistoryLocation, from: HistoryLocation, navigation: HistoryNavigation) => {
console.log(`${navigation.direction}: ${from.location} -> ${to.location}`, navigation.savedPosition);
};
const stop = history.listen(listener);
history.replace('/products/42?variant=blue', state);
history.saveScroll(scroll);
history.push('/bag');
history.go(-1);
const webHistory = createWebHistory('/shop');
const hashHistory = createWebHashHistory('/preview');
console.log(history.location, webHistory.createHref('/bag'), hashHistory.createHref('/bag'));
stop();
history.destroy();
webHistory.destroy();
hashHistory.destroy();