Switch Component
Relevant source files
The following files were used as context for generating this wiki page:
The Switch component is a functional routing utility in wouter-vue designed to render the first matching Route among its children. It mimics the exclusive routing behavior found in traditional routers, ensuring that only one view is active at a time even if multiple route patterns potentially match the current location.
Beyond basic route selection, the Switch and its enhanced counterpart AnimatedSwitch support hierarchical reactive data passing. This allows developers to provide data contexts at the router level that are automatically merged and made available to child components through the Composition API.
Sources: src/components/Switch.tsx:1-10, README.md:15-30
Core Architecture and Matching Logic
The Switch component operates by iterating through its flattened children and evaluating their path props against the current application location. It uses an internal parser (defaulting to path-to-regexp) to determine matches.
Rendering Workflow
The component utilizes a memoized approach to process children. It flattens the slot content to handle nested Fragment components or arrays, then performs a sequential check for the first valid match.
The diagram shows the sequential evaluation logic where the first successful match terminates the search.
Sources: src/components/Switch.tsx:55-115
Key Logic Elements
| Feature | Implementation Detail |
|---|---|
| Exclusivity | Returns early on the first match; subsequent children are ignored. |
| Flattening | Recursively extracts children from Fragment types to ensure deep matching. |
| Catch-all | Elements without a path prop are treated as default matches if no prior route matched. |
| Reactivity | Uses unref and computed for location and data to ensure the UI updates on URL changes. |
Sources: src/components/Switch.tsx:28-50, src/components/Switch.tsx:80-100
Hierarchical Data Passing
One of the unique features of the Switch component is its integration with the RouteDataKey to provide reactive data to its descendants. This allows for a "top-down" data flow where configuration or state can be injected at the route definition level.
This sequence illustrates how data provided to the Switch is made available to any component rendered within that switch's scope.
Sources: src/components/Switch.tsx:53-54, examples/example/src/components/AppRoutes.vue:15-28
Implementation Snippet
The component provides data using Vue's dependency injection system:
// src/components/Switch.tsx:53-54
// Provide reactive data context for children
provideVue(RouteDataKey, computed(() => unref(props.data) || {}))
AnimatedSwitch
The AnimatedSwitch is a specialized wrapper around the Switch component that integrates Vue's <Transition> system. It enables smooth visual transitions between routes by using the current location as a key to trigger re-renders.
Configuration Options
| Prop | Type | Default | Description |
|---|---|---|---|
name | String | 'fade' | The CSS transition class name. |
mode | String | 'out-in' | The transition mode (e.g., out-in, in-out). |
data | Object | undefined | Reactive data to be provided to the route context. |
Sources: src/components/AnimatedSwitch.tsx:18-34
Structure
The AnimatedSwitch ensures that the Switch is keyed by the URL path. When the path changes, the old component is transitioned out and the new one is transitioned in.
// src/components/AnimatedSwitch.tsx:45-56
return h(
Transition,
{
name: props.name || 'fade',
mode: props.mode || 'out-in',
},
() => h(Switch, {
key: locationValue,
location: props.location,
data: props.data,
}, slots)
)
Sources: src/components/AnimatedSwitch.tsx:40-60
Summary
The Switch component provides the essential logic for exclusive route matching in wouter-vue. By evaluating children in order and stopping at the first match, it handles complex routing scenarios and 404 pages efficiently. Its support for hierarchical data passing and the existence of the AnimatedSwitch variant make it a versatile tool for building reactive, animated, and data-driven navigation structures.
Sources: src/components/Switch.tsx:11-20, examples/example/src/components/AppRoutes.vue:5-15