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

It's just a page with a link to a clothes listing.

Let's register the VueRouter:

Vue.use(VueRouter)

We have three pages in our website, represented by the following components:

const Home = { template: '<div>Welcome to Clothes for Humans</div>' }

const Clothes = { template: '<div>Today we have shoes</div>' }

const Sales = { template: '<div>Up to 50% discounts! Buy!</div>' }

They represent the home page, the clothes listing, and a page we used last year with some
discounts.

Let's register some routes:

const router = new VueRouter({

routes: [

{ path: '/', component: Home }

{ path: '/clothes', component: Clothes },

{ path: '/last-year-sales', component: Sales }

]

})

Finally, we add a root Vue instance:

new Vue({

router,

el: '#app'

})

You can launch the application, and it should work without any problems.

Black Friday is tomorrow and we forgot that it's the biggest event in fashion around the

world. We don't have time to rewrite the home page, but there's that page from last year's
sales that can do the trick. What we will do is redirect users who visit our home page to that

page.

To implement this, we need to modify how we registered our routes:

const router = new VueRouter({

routes: [

{ path: '/', component: Home, redirect: '/last-year-sales' },

{ path: '/clothes', component: Clothes },

{ path: '/last-year-sales', component: Sales }

]

})