A single-page app loads once, but users still expect separate "pages" with their own URLs, a working back button, and shareable links. Vue Router, Vue's official router, provides that by swapping which component is shown based on the current URL, without reloading the page.
You will set up the router, define routes that map URLs to components,
link between them with router links, and read
route parameters to build dynamic pages such as /jobs/12.
You will also add redirects and a 404 page, and navigate from code with
programmatic navigation.
Watch the lessons in order, then continue on to State Management with Pinia.
The Net Ninja explains why a "multi-page" Vue site needs a router.
Setting up Vue Router in a new project and creating your first routes.
Linking between pages with router links instead of ordinary anchor tags.
Passing route parameters in the URL and generating links to dynamic pages.
Redirecting old URLs to new ones and showing a not-found page for unknown routes.
Navigating from code, for example after a form is submitted, rather than with a link.
Brad Traversy adds Vue Router to his task tracker app, splitting it into separate pages.