Question 11: Filename: app.js Suppose the application is running on "…

1const inventory = {
2    101: {product: "Canvas", quantity: 15, warehouse: 3},
3    102: {product: "Brushes", quantity: 8, warehouse: 2}
4}
5
6const errorPage = {
7    template: `<h1>Item not found in inventory!</h1>`
8}
9
10const productDetails = {
11    template: `<h1>{{item.product}} - {{item.quantity}} units stored in
12                 {{item.warehouse}} locations.</h1>`,
13    data() {
14        return {item: inventory[this.$route.params.productId]}
15    },
16    watch: {
17        '$route'(to, from) {
18            this.item = inventory[to.params.productId]
19        }
20    }
21}
22
23const router = new VueRouter({
24    mode: 'history',
25    routes: [
26        { path: '/inventory/:productId', component: productDetails },
27        { path: '*', component: errorPage },
28    ],
29})
30
31new Vue({
32    el: '#app',
33
34    template: '<div><router-view /></div>',
35    router,
36})