Exploring the RouterView element
RouterView
is a Vue component whose job is to do the following:
- Render different child components
- Mount and unmount itself automatically at any nesting level, depending on the route’s given path
Without RouterView
, it is almost impossible to render dynamic content correctly for users at runtime. For example, when a user navigates to the Home page, RouterView
knows and only generates the content related to that page.
Let’s see how we can pass props to the view through RouterView
.
Passing props to view
Since RouterView
is a component, it can also receive props. The only prop it receives is name
, which is the same name registered in the corresponding route’s record defined in the router
object at the initialization phase.
The Vue engine automatically passes any other additional HTML attributes to any view component that RouterView
renders.
Take the following RouterView
component with a "main-app...