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...