Passing route parameters

Previously we learnt each route was a standalone view and did not need to pass or connect any data to the other routes. But Vue Router doesn’t limit the power of routing to only this. With named routes, we can also easily enable data communication between routes.

In our example app, we want our about page to be able to receive a data string called user as the user’s name from the link triggered. Prior to Vue Router 4.1.4, we can achieve this feature by changing the to prop from a string literal to an object literal with a name and params properties, as shown below:

<RouterLink :to="{ name: 'about', params: { user: 'Adam' }}">
  About
</RouterLink>

This change informs the router to pass the desired parameters to the About page when users click on the targeted link. These additional parameters are not visible on the rendered href link, as shown in the following screenshot:

...