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

We will open an online restaurant with ten different dishes. We will create a route for every

dish.

The HTML layout of our website is the following:

<div id="app">

<h1>Online Restaurant</h1>

<ul>

<li>

<router-link :to="{ name: 'home' }" exact>

Home

</router-link>

</li>

<li v-for="i in 10">

<router-link :to="{ name: 'menu', params: { id: i } }">

Menu {{i}}

</router-link>

</li>

</ul>

<router-view class="view"></router-view>

</div>

This will create 11 links, one for the home page and ten for the dishes.

After registering the VueRouter in the JavaScript part, the code is as follows:

Vue.use(VueRouter)

Create two components; one will be a placeholder for the home page:

const Home = { template: `

<div>

Welcome to Online Restaurant

</div>

` }

The other routes will be connected to a Menu component:

const Menu = { template: `

<div>

You just ordered

<img :src="'http://lorempixel.com/200/200/food/' + $route.params.id">

</div>

` }