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

Building an E-Commerce Store - Adding a Checkout Chapter 11

name: 'Category',

...

},

{

path: '/product',

redirect: {name: 'Home'}

},

{

path: '/product/:slug',

name: 'Product',

component: ProductPage

},

{

path: '/basket',

name: 'Basket',

component: OrderBasket

},

{

path: '/checkout',

name: 'Checkout',

component: OrderCheckout

},

{

path: '/complete',

name: 'Confirmation',

component: OrderConfirmation

},

{

path: '/404',

alias: '*',

component: PageNotFound

}

]

We can now update the placeholder in the header of our app with a router-link:

<header>

<router-link :to="{name: 'Basket'}">Cart {{ cartQuantity }}</router-link>

</header>