Vue Hash Routing Implementation

This challenge focuses on building a fundamental part of client-side routing: hash-based navigation in a Vue.js application. Understanding hash routing is crucial for applications that need to manage different views or states using the URL fragment identifier without requiring server-side routing configuration.

Problem Description

Your task is to implement a simple hash-based router for a Vue.js application using TypeScript. This router should allow you to define different "routes" (components or views) that are displayed based on the current value of the URL's hash. When the hash changes, the router should dynamically render the corresponding component.

Key Requirements:

Route Definition: You should be able to define routes, mapping URL hash paths (e.g., #about, #contact) to specific Vue components.
Component Rendering: Based on the current URL hash, the router should render the associated component in a designated area of your Vue application.
Hash Change Handling: The router must listen for changes in the browser's URL hash and update the displayed component accordingly.
Initial Load: When the application loads, the router should parse the initial URL hash and render the correct component.
Default Route: Implement a mechanism to display a default component if no matching route is found or if the hash is empty.

Expected Behavior:

When the URL is http://localhost:8080/, and no hash is present, display the "Home" component.
When the URL changes to http://localhost:8080/#about, the "About" component should be rendered.
When the URL changes to http://localhost:8080/#contact, the "Contact" component should be rendered.
If the URL has an unknown hash, e.g., http://localhost:8080/#nonexistent, the default "Home" component (or a designated fallback) should be rendered.

Edge Cases:

Handling an empty hash (#).
Handling unknown hash values.
Ensuring the router works correctly on the initial page load.

Examples

Let's assume we have three simple Vue components: Home.vue, About.vue, and Contact.vue.

Example 1: Initial Load (No Hash)

Input: Browser is navigated to http://localhost:8080/

Output: The Home.vue component is rendered.

Explanation: Since there is no hash in the URL, the router uses the defined default route to render the Home component.

Example 2: Navigating to a Specific Route

Input: Browser is navigated to http://localhost:8080/#about

Output: The About.vue component is rendered.

Explanation: The router detects the #about hash, finds the corresponding route definition, and renders the About component.

Example 3: Navigating to Another Route

Input: Browser is navigated to http://localhost:8080/#contact

Output: The Contact.vue component is rendered.

Explanation: Similar to Example 2, the router processes the #contact hash and renders the Contact component.

Example 4: Unknown Hash

Input: Browser is navigated to http://localhost:8080/#dashboard

Output: The Home.vue component is rendered (assuming Home is the default/fallback).

Explanation: The #dashboard hash does not match any defined routes. The router falls back to rendering the default component.

Constraints

Your implementation should be done in TypeScript.
You should use Vue 3 and its Composition API.
The router should not rely on any external routing libraries (e.g., vue-router). You are building the core logic yourself.
The solution should be efficient and avoid unnecessary re-renders.
The route definitions should be clear and easily extensible.

Notes

You'll need to think about how to create a Vue plugin or a composable function to manage the routing logic.
The window.location.hash property and the hashchange event will be key to implementing this.
Consider how you will manage the current route state within your Vue application.
Think about how to make the component rendering dynamic. A <component :is="currentComponent" /> approach might be useful.
The problem asks for implementation, so focus on the core routing logic rather than creating elaborate UI for the components themselves.