011. The Router Outlet
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Vue Router uses <router-view> as a placeholder where the matched component for the current URL will be rendered. You can think of it as a dynamic <slot> that the router controls.
022. Navigation
Instead of standard <a> tags, you use <router-link to="/path">. This intercepts the click event and tells Vue Router to update the URL and swap the component without asking the server for a new HTML document.
033. useRoute vs useRouter
In the Composition API, useRoute() gives you information about the CURRENT route (params, query strings, path). useRouter() gives you the router INSTANCE, which has methods like .push() and .replace() to change pages programmatically.
?Frequently Asked Questions
What is createWebHistory?
`createWebHistory` tells Vue Router to use the browser's native History API for routing. This gives you clean URLs like `/about` instead of the old hash-based URLs like `/#/about`.
