Building an E-Commerce Store - Browsing Products Chapter 10We can now proceed with making the template for the category list. As our categories are
saved in the store, loading and displaying them should be familiar by now. It is advised
you load the categories from the state into a computed function - for cleaner template code
and easier adaptation should you need to manipulate it in any way.
Before we create the template, we need to create a route for the category. Referring back to
our plan in Chapter 9, Using Vue-Router Dynamic Routes to Load Data, we can see the route
is going to be /category/:slug – add this route with a name and enable props, as we'll
utilize them for the slug. Ensure you have made the CategoryPage file and initialized the
component.
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
components: {
default: HomePage,
sidebar: ListCategories
}
},
{
path: '/category/:slug',
name: 'Category',
component: CategoryPage,
props: true
},
{
path: '/product/:slug',
name: 'Product',
component: ProductPage
},{
path: '/404',
alias: '*',
component: PageNotFound
}
]
});