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

Single Page Applications Chapter 15

How to do it...

Let's imagine that we have a fashion website and Lisa, the employee responsible for giving

titles to dresses, creates two new links for two pieces of clothing:

<router-link to="/green-dress-01/">Valentino</router-link>

<router-link to="/green-purse-A2/">Prada</router-link>

The developers create the corresponding routes in the vue-router:

const router = new VueRouter({

routes: [

{

path: '/green-dress-01',

component: Valentino01

},

{

path: '/green-purse-A2',

component: PradaA2

}

]

})

Later, it is discovered that the two items are not green but red. Lisa is not to blame since she

is color-blind.

You are now in charge of changing all the links to reflect the true color of the listing. The
first thing you do is change the links themselves. Here's what the HTML layout looks like

after you edit it:

<div id="app">

<h1>Clothes Shop</h1>

<router-link to="/red-dress-01/">Valentino</router-link>

<router-link to="/red-purse-A2/">Prada</router-link>

<router-view></router-view>

</div>

You add the VueRouter plugin to Vue:

Vue.use(VueRouter)

Then, register the new routes as well as aliases for the old ones:

const router = new VueRouter({

routes: [

{

path: '/red-dress-01',

component: Valentino01,