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

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

and then we modify our customers route as follows

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

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products