Hierarchical Data Passing

wouter-vue provides a powerful mechanism for passing reactive data hierarchically through your routing tree.

The Problem

How do you pass common data (theme, layout, permissions) to a group of pages without prop drilling?

The Solution

Use the data prop on <Switch>, <AnimatedSwitch>, and <Route> components to pass data down the routing tree.

Basic Usage

Pass data from Switch:

Override data in Route:

Reactive Data Flow

Data is fully reactive. Changes in parent routes automatically propagate to child components:

When login() is called, all child components automatically receive updated data.

Accessing Data

Via Props (for :component)

Via useRouteData() Composable

Data Merging Behavior

Data is merged hierarchically with child properties overriding parent properties:

• Data from <Switch> or <AnimatedSwitch> becomes the base for all child routes
• Data from <Route> merges with parent data, with child properties taking precedence
• Merging is shallow - child properties completely replace parent properties with the same key

Nested Routes

Data inheritance works seamlessly with nested routes:

Performance Considerations

• Data merging is efficient - uses Vue’s computed for automatic reactivity
• No performance impact for routes without data
• Shallow merging keeps overhead minimal

Use Cases

• Theme management - Pass theme to all pages
• Layout configuration - Different layouts per route
• Permissions - User permissions inherited by nested routes
• Page metadata - Titles, descriptions, breadcrumbs
• Feature flags - Enable/disable features per route

See Dynamic Page Titles for a practical example.