Route Component
Relevant source files
The following files were used as context for generating this wiki page:
The Route component is a core building block of the wouter-vue library, responsible for conditional rendering based on the current browser location. It matches a user-defined path pattern against the current URL and renders its associated component or slot when a match is found.
This component leverages Vue 3's Composition API to provide reactive routing, supporting features such as dynamic path parameters, nested routing, and hierarchical data passing. It is designed to be lightweight and performant, utilizing path-to-regexp for robust pattern matching.
Sources: src/components/Route.tsx:1-12, README.md:14-38
Component Architecture and Logic
The Route component operates by injecting the current router context and matching the provided path prop against the current location. It uses a reactive computed property to determine if the route is active, ensuring the UI stays in sync with the URL.
Component Properties
The Route component accepts several props to define its behavior:
| Prop | Type | Description |
|---|---|---|
path | string | RegExp | The pattern to match against the current URL location. |
component | Component | Function | The Vue component to render. Supports async loaders. |
nest | boolean | Enables nested routing by creating a sub-router for children. |
match | MatchResult | Optional pre-computed match result to override internal matching. |
data | Object | Arbitrary data to be passed down the routing tree. |
Sources: src/components/Route.tsx:32-40, README.md:68-75
Rendering Logic and Scoped Slots
The component supports two primary ways of rendering content:
- Component Prop: Renders the provided component with
paramsanddatapassed as props. - Default Slot: Renders nested content. The slot can be a "scoped slot," receiving
paramsanddataas an object argument.
Sources: src/components/Route.tsx:121-128, examples/example/README.md:61-68
The diagram shows the internal logic of the Route component from initialization to final rendering. Sources: src/components/Route.tsx:44-149
Hierarchical Data and Parameters
A unique feature of wouter-vue is its ability to pass data and parameters down the routing tree reactively. The Route component facilitates this using Vue's provide/inject mechanism.
Reactive Data Merging
When a Route is rendered, it merges data from its parent route with the data provided in its own data prop. This allows children to inherit global context (like themes or layouts) while overriding specific values.
Sources: src/components/Route.tsx:57-65, examples/example/src/pages/AboutPage.vue:85-92
Parameter Extraction
Dynamic segments in the path (e.g., /users/:id) are extracted during the matching process and made available to the rendered component.
This sequence illustrates how parameters are extracted from the URL and provided to child components. Sources: src/components/Route.tsx:88-100, examples/example/src/pages/AboutPage.vue:74-83
Advanced Features
Nested Routing
When the nest prop is set to true, the Route component acts as a gateway for sub-routing. It creates a new Router instance where the "base" path is set to the matched portion of the current route. This allows sub-routes to define paths relative to their parent.
Sources: src/components/Route.tsx:130-143, README.md:60-65
Async Component Loading
The component prop supports asynchronous loading. If a function is passed (e.g., () => import('./Page.vue')), the Route component automatically wraps it in Vue's defineAsyncComponent. This allows for seamless code splitting.
Sources: src/components/Route.tsx:106-116, examples/example/README.md:71-85
Build-time Optimization
For high-performance applications, wouter-vue includes a Vite plugin (vitePluginRoutes) that can generate static route configurations at build time. This avoids dynamic imports and reduces the main bundle size by pre-calculating route structures.
Sources: src/vite-plugin-routes.ts:10-30, package.json:76-77
Summary
The Route component is a lightweight yet powerful tool for Vue 3 applications. By focusing on the Composition API and standard Web APIs (via path-to-regexp), it provides a high-performance routing solution (~7.9KB gzipped) that handles complex scenarios like nested routing and hierarchical data passing with minimal overhead.
Sources: README.md:14-18, package.json:2-10