to show multiple different views on the same route, Vue router supports ‘named views’.
named views allow us to create multiple named router views and then assign components to all views in the route.
to show this we modify our main router view in App.vue as follows
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div id="app"> <img src="./assets/logo.png"> <router-link to="/">/Home</router-link> <router-link to="/users">/users</router-link> <router-link to="/customers">/customers</router-link> <p>Main Router View</p> <router-view/> <p>Secondary Router View</p> <router-view name="secondary"/> </div> </template> |
in addition to our main router view we added a secondary router view that is aptly named secondary
now we also create a new component called CustomersSecondary.vue with the following content
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <div>CUSTOMERS SECONDARY</div> </div> </template> <script> export default { } </script> |
and then we modify our customers route as follows
|
1 2 3 4 5 6 7 8 9 |
{ path: '/customers', name: 'customers', components: { default: Customers, secondary: CustomersSecondary } }, |
instead of pointing the route to a single component we use the components attribute of the route to assign multiple components. The default component will be shown in the default router view and the component assigned to ‘secondary’ the name of our router view will be shown in the named router view
