The Vue 3 router

Vue is a great framework to build SPAs, but without a router, the task would soon become quite complex. The Vue router is an official plugin that takes over the navigation of the application and matches a URL to a component. This gives us the advantages of an MPA. With the router, we can do the following:

• Create and manage dynamic routes to components, matching parameters to props automatically if needed
• Identify routes (addresses and components) by name and trigger navigation by code
• Load components dynamically when needed, thus reducing the bundle size
• Create a natural and logical way to approach website navigation and code splitting
• Control navigation with well-known events, before and after navigation occurred
• Create page transition animations in a way that is not possible with MPAs

The implementation of the Vue 3 router is simple and follows the same methodology as with other components of the ecosystem. Let’s take our...