Vue Router is a Vue plugin that allows you to create robust routes for navigating between pages in a single-page application (SPA) without having to refresh the page. A quick use is, for example, if we want to have a User component that is used for all users but with different user IDs. You can use this component as follows:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
In this example, any /user route followed by an ID (for example, /user/1 or user/2) will be directed to the User component, which will render the template with the ID. This is only possible when the Vue plugin is installed, so let's see how we can install it for Vue apps in the next section, before learning how it works in a Nuxt app.
