Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue-Router Dynamic Routes to Load Data Chapter 9

This can be reduced somewhat, by passing the $formatProducts function directly into the

store commit() function, rather than storing it as a variable:

new Vue({

el: '#app',

store,

router,

created() {

CSV.fetch({url: './data/csv-files/bicycles.csv'}).then(data => {

this.$store.commit('products', this.$formatProducts(data));

});

}

});

Displaying a single product

With our data stored, we can now begin making our components and displaying content on

the frontend. We're going to start by making a product view – displaying product details,

variations, and images. We'll move on to creating the category listing page in Chapter 10,

Building an E-Commerce Store – Browsing Products.

The first step in making our product view is to create the route, to allow the component to
be displayed via a URL. Referring back to our notes at the beginning of the chapter, the

product component is to be loaded on the /product/:slug path.

Create a routes array in your Vue-router, with the path and component specified:

const router = new VueRouter({

routes: [

{

path: '/product/:slug',

component: ProductPage

}

]

});

With the layout of the products object explained, we can start to understand how the

route and products link. We will pass the handle of the product into the URL. This will

select the product with that handle and display the data. This means we do not need to
explicitly link slug with products.