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