Class: VueRouterBridge

Documentation / @xmachines/play-vue-router / VueRouterBridge

Defined in: play-vue-router/src/vue-router-bridge.ts:32

@xmachines/play-vue-router - Vue Router 4.x adapter for XMachines Play

Provides bidirectional integration between Vue Router and XMachines state machines.

Extends

RouterBridgeBase

Constructors

Constructor

new VueRouterBridge(
   vueRouter,
   actor,
   vueRouteMap): VueRouterBridge;

Defined in: play-vue-router/src/vue-router-bridge.ts:109

Create a Vue Router bridge

Parameters

Parameter	Type	Description
`vueRouter`	`Router`	Vue Router instance
`actor`	`AbstractActor`<`AnyActorLogic`> & `Routable`	XMachines actor instance
`vueRouteMap`	`RouteMap`	Bidirectional state ID ↔ route name mapping

Returns

VueRouterBridge

Example

const bridge = new VueRouterBridge(router, actor, routeMap);
bridge.connect(); // Explicit connect — NOT automatic
onUnmounted(() => bridge.disconnect());

Overrides

RouterBridgeBase.constructor

Properties

Property	Modifier	Type	Description	Inherited from	Defined in
`actor`	`readonly`	`AbstractActor`<`AnyActorLogic`> & `Routable`	Actor with currentRoute signal and send method	`RouterBridgeBase`.`actor`	play-router/dist/router-bridge-base.d.ts:55
`hasConnectedOnce`	`protected`	`boolean`	-	`RouterBridgeBase`.`hasConnectedOnce`	play-router/dist/router-bridge-base.d.ts:61
`isConnected`	`protected`	`boolean`	-	`RouterBridgeBase`.`isConnected`	play-router/dist/router-bridge-base.d.ts:60
`isProcessingNavigation`	`protected`	`boolean`	-	`RouterBridgeBase`.`isProcessingNavigation`	play-router/dist/router-bridge-base.d.ts:63
`lastSyncedPath`	`protected`	`string`	-	`RouterBridgeBase`.`lastSyncedPath`	play-router/dist/router-bridge-base.d.ts:62
`routeMap`	`readonly`	`object`	Bidirectional route map for stateId ↔ path resolution	`RouterBridgeBase`.`routeMap`	play-router/dist/router-bridge-base.d.ts:56
`routeMap.getPathByStateId`	`public`	`string` \| `null` \| `undefined`	-	-	play-router/dist/router-bridge-base.d.ts:58
`routeMap.getStateIdByPath`	`public`	`string` \| `null` \| `undefined`	-	-	play-router/dist/router-bridge-base.d.ts:57
`routeWatcher`	`protected`	\| `Watcher` \| `null`	-	`RouterBridgeBase`.`routeWatcher`	play-router/dist/router-bridge-base.d.ts:64

Methods

connect()

connect(): void;

Defined in: play-vue-router/src/vue-router-bridge.ts:229

Override base class connect() to add Vue-native initial router → actor sync.

Calls super.connect() to:

Set isConnected = true, hasConnectedOnce = true
Create the TC39 Signal watcher for actor → router direction
Call watchRouterChanges() to register the afterEach guard

Then performs the initial URL → actor sync using Vue-native route name lookup (afterEach does not fire for the already-loaded route at connect time).

Note: The super.connect() call is intentional — it ensures that any change to RouterBridgeBase.connect() initialization order causes VueRouterBridge integration tests to fail, providing a safety net (per CONS-09).

Returns

void

Overrides

RouterBridgeBase.connect

disconnect()

disconnect(): void;

Defined in: play-router/dist/router-bridge-base.d.ts:87

Disconnect the router bridge from the Actor.

Stops signal watching and unregisters framework-specific router listener.

Returns

void

Inherited from

RouterBridgeBase.disconnect

dispose()

dispose(): void;

Defined in: play-vue-router/src/vue-router-bridge.ts:275

Cleanup alias for component lifecycle integration.

Returns

void

Example

onUnmounted(() => bridge.dispose());

extractParams()

protected extractParams(pathname, stateId): Record<string, string>;

Defined in: play-router/dist/router-bridge-base.d.ts:134

Extract path parameters from URL using the URLPattern API.

Accesses globalThis.URLPattern at runtime — no polyfill is imported by this library. If URLPattern is unavailable (Node.js < 24, older browsers without a polyfill), this method returns {} silently (graceful degradation — routing still works, params will be empty).

Parameters

Parameter	Type	Description
`pathname`	`string`	The actual URL path (e.g., ‘/profile/john’)
`stateId`	`string`	The matched state ID for looking up route pattern

Returns

Record<string, string>

Extracted path parameters, or empty object if URLPattern is unavailable or no match

Inherited from

RouterBridgeBase.extractParams

extractQuery()

protected extractQuery(search): Record<string, string>;

Defined in: play-router/dist/router-bridge-base.d.ts:141

Extract query parameters from URL search string.

Parameters

Parameter	Type	Description
`search`	`string`	URL search string (e.g., ‘?tab=security&page=1’)

Returns

Record<string, string>

Extracted query parameters or empty object

Inherited from

RouterBridgeBase.extractQuery

getInitialRouterPath()

protected getInitialRouterPath(): string | null;

Defined in: play-vue-router/src/vue-router-bridge.ts:263

Return null to suppress base class initial sync — VueRouterBridge handles it in connect() using the Vue-native named-route lookup instead.

Returns

string | null

Overrides

RouterBridgeBase.getInitialRouterPath

navigateRouter()

protected navigateRouter(path): void;

Defined in: play-vue-router/src/vue-router-bridge.ts:126

Navigate Vue Router to the given path/stateId.

For state IDs (starting with #), resolves to named route. For paths (starting with /), navigates directly.

Parameters

Parameter	Type
`path`	`string`

Returns

void

Overrides

RouterBridgeBase.navigateRouter

syncActorFromRouter()

protected syncActorFromRouter(pathname, search?): void;

Defined in: play-router/dist/router-bridge-base.d.ts:101

Sync actor state when router location changes.

Sends play.route event to actor with resolved stateId, params, and query. Prevents circular updates via isProcessingNavigation flag.

Parameters

Parameter	Type
`pathname`	`string`
`search?`	`string`

Returns

void

Inherited from

RouterBridgeBase.syncActorFromRouter

syncRouterFromActor()

protected syncRouterFromActor(route): void;

Defined in: play-router/dist/router-bridge-base.d.ts:94

Sync router location when actor route signal changes.

Calls navigateRouter() for framework-specific navigation. Prevents circular updates via isProcessingNavigation flag.

Parameters

Parameter	Type
`route`	`unknown`

Returns

void

Inherited from

RouterBridgeBase.syncRouterFromActor

unwatchRouterChanges()

protected unwatchRouterChanges(): void;

Defined in: play-vue-router/src/vue-router-bridge.ts:209

Unsubscribe from Vue Router afterEach guard.

Returns

void

Overrides

RouterBridgeBase.unwatchRouterChanges

watchRouterChanges()

protected watchRouterChanges(): void;

Defined in: play-vue-router/src/vue-router-bridge.ts:150

Subscribe to Vue Router changes using afterEach guard.

Vue’s afterEach provides native params/query extraction which is more accurate than URLPattern-based extraction. Override the base class router→actor sync to use Vue-native params/query.

Note: Uses isProcessingNavigation flag from base class.

Returns

void

Overrides

RouterBridgeBase.watchRouterChanges