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

components: {

PageNotFound

},

data() {

return {

productNotFound: false

}

},

computed: {

product() {

let product;

if(Object.keys(this.$store.state.products).length) {

product = this.$store.state.products[this.$route.params.slug];

if(!product) {

this.productNotFound = true;

}

}

return product;

}

}

};

Try entering an erroneous string at the end of the URL – you should be faced with our, now

familiar, 404 error page.

Displaying product information

With our product loading, filtering, and error-catching in place, we can proceed with
displaying the information we need for our product. Each product could contain one or

many images, and one or many variations and any combination in-between – so we need to

make sure we cater for each of these scenarios.

To see the data available to us, add a console.log(product) just before the return:

product() {

let product;

if(Object.keys(this.$store.state.products).length) {

product = this.$store.state.products[this.$route.params.slug];

if(!product) {

this.productNotFound = true;