Custom Location Hooks

wouter-vue supports custom location hooks for different routing behaviors.

Hash-based Routing

Use hash-based routing (e.g., #/about) instead of browser history:

Example URLs:

• http://example.com/#/about
• http://example.com/#/users/123

Memory Location (Testing)

Use memory location for testing - routes don’t affect browser history:

Use cases:

• Unit testing
• Component testing
• Storybook stories
• Isolated routing scenarios

Creating Custom Hooks

You can create custom location hooks by implementing the LocationHook interface:

Example:

Notes

• Default location hook is useBrowserLocation() (browser history API)
• Hash location is useful for static hosting without server configuration
• Memory location is perfect for testing environments
• Important: Router component uses :hook prop, not :location
• Custom hooks must be functions that accept a RouterObject and return [Ref<Path>, NavigateFn]
• For memoryLocation, call hook() once and reuse the result to ensure all components share the same reactive state