If we are going to understand how a router works in Nuxt, we should first understand how it works in Vue. We can then understand how to implement it in our Nuxt app. Custom routes in a traditional Vue app are created via Vue Router. So, let's begin by understanding what Vue Router is.
Introducing Vue Router
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...
