Vue.js 2 Cookbook

How to do it…

Suppose that we have an online clothing shop.

This will be the HTML layout of the site:

<div id="app">  <h1>Clothes for Humans</h1>  <ul>    <li><router-link to="/">Home</router-link></li>    <li><router-link to="/clothes">Clothes</router-link></li>  </ul>  <router-view></router-view></div>

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 ...