Building an E-Commerce Store - Browsing Products Chapter 10We can use the component in the template as we have with the <list-
products> component. The issue with this is that if we want to display our list in a sidebar
and our sidebar needs to be consistent across the site, we would have to copy and paste a
lot of HTML between views.
A better approach would be to use named routes and set the template once in our
index.html.
Update the app template to contain a
a router-view, leaving the one inside main unnamed, while giving the one inside the
aside element a name of sidebar:
<div id="app">
<main>
<router-view></router-view>
</main>
<aside>
<router-view name="sidebar"></router-view>
</aside>
</div>Within our routes object, we can now add different components to different named views.
On the Home route, change the component key to components, and add an object -
specifying each component and its view:
{
path: '/',
name: 'Home',
components: {
default: HomePage,
sidebar: ListCategories
}
}The default indicates that the component will go into the unnamed router-view. This
allows us to still use the singular component key if required. For the component to be
correctly loaded into the sidebar view, we need to alter how the ListCategories
component is initialized. Instead of using Vue.component, initialize it as you would a
view component:
const ListCategories = {
name: 'ListCategories'
};