Single Page Applications Chapter 15In the preceding component, we refer to the global router object with $route, and we take
the id parameter from the URL. Lorempixel.com is a website that provides sample
images. We are connecting a different image for every id.
Finally, create the router itself using the following code:
const router = new VueRouter({
routes: [
{ path: '/', name:'home', component: Home },
{ path: '/menu/:id', name: 'menu', component: Menu },
]
})You can see that the path for the menu contains /:id, which is a placeholder for the id
parameter that will appear in the URL.
At last, write a root Vue instance:
new Vue({
router,
el: '#app'
})You can launch the application now and should be able to see all the menu items. Clicking
on any one of them should order a different dish: