Building an E-Commerce Store - Browsing Products Chapter 10Adding a new route
Let us add a new route to our routes array. For now, we'll work on the HomePage
component, which will have the / route. Make sure you add it to the top of the routes
array, so it doesn't get overridden by any of the other components:
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: HomePage
},
{
path: '/product/:slug',
component: ProductPage
},{
path: '/404',
alias: '*',
component: PageNotFound
}
]
});Within the HomePage component, create a new computed property and gather all the
products from the store. Ensure the products have loaded before displaying anything in
the template. Populate the HomePage component with the following code:
const HomePage = {
name: 'HomePage',template: `<div v-if="products"></div>`,computed: {
products() {
return this.$store.state.products;
}
}
};