Programmatic Navigation in Vue with TypeScript

This challenge focuses on implementing programmatic navigation within a Vue.js application using the vue-router. Programmatic navigation allows you to navigate between routes based on application logic, user actions, or data changes, rather than solely relying on user clicks. This is crucial for features like redirects after login, navigating based on API responses, or implementing complex workflows.

Problem Description

You are tasked with creating a Vue.js component that demonstrates programmatic navigation using vue-router. The component should include a button that, when clicked, navigates the user to a dynamically determined route based on a prop passed to the component. The prop, targetRoute, will be a string representing the name of the route to navigate to. The component should also handle a scenario where the targetRoute is invalid (doesn't exist) and display an error message.

Key Requirements:

• Route Definition: Assume you have a vue-router instance configured with at least three named routes: 'Home', 'About', and 'Contact'. You don't need to define these routes in the challenge itself, but your solution must be compatible with them.
• Prop-Driven Navigation: The component must accept a targetRoute prop (string type).
• Navigation Logic: When the button is clicked, the component should use router.push() to navigate to the route specified by the targetRoute prop.
• Error Handling: If the targetRoute prop is not one of the defined routes ('Home', 'About', 'Contact'), the component should display an error message: "Invalid route: [targetRoute]".
• TypeScript: The solution must be written in TypeScript, including proper type annotations.
• Component Structure: The component should be a functional component using the Composition API.

Expected Behavior:

1. The component renders a button labeled "Navigate".
2. When the button is clicked:
   • If targetRoute is 'Home', 'About', or 'Contact', the user is navigated to the corresponding route.
   • If targetRoute is any other string, an error message "Invalid route: [targetRoute]" is displayed.
3. The component should gracefully handle cases where targetRoute is initially undefined or null. In such cases, display the error message.

Edge Cases to Consider:

• targetRoute being an empty string.
• targetRoute being null or undefined.
• targetRoute containing unexpected characters.
• The router not being properly initialized (though this is assumed to be handled elsewhere in the application).

Examples

Example 1:

Input: targetRoute = 'About'
Output: User is navigated to the 'About' route.
Explanation: The button click triggers router.push('/about')

Example 2:

Input: targetRoute = 'NonExistentRoute'
Output: An error message "Invalid route: NonExistentRoute" is displayed.
Explanation: The button click triggers the error handling logic.

Example 3:

Input: targetRoute = null
Output: An error message "Invalid route: null" is displayed.
Explanation: The component handles null values for targetRoute.

Constraints

• The component must be a functional component using the Composition API.
• The solution must be written in TypeScript.
• The component should only contain the navigation logic and error handling. It does not need to include route definitions.
• Assume the router instance is available in the component's scope.
• The component should be relatively concise and readable.

Notes

• Consider using a conditional statement to check if the targetRoute is valid before attempting navigation.
• You can use a simple <div> element to display the error message.
• Focus on the programmatic navigation aspect and error handling. Styling is not required.
• Think about how to handle potential errors during navigation (though a full error handling implementation is not required for this challenge).