Passing Route Parameters

In the previous sections of this chapter, each route was a standalone view and did not need to pass or connect any data to the other routes. But the power of routing is not limited only to 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 trigger. This can be achieved by changing the to prop from a string literal to an object literal of :to="{ name: 'about' }", and then adding a new params: { user: 'Adam' } property to that object:

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

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