How it works…

The first thing your program does is to register vue-router as a plugin. The vue-router, in turn, registers the routes (which are parts of URLs) and connects components to each of them.

When we visit the application for the first time, the URL on the browser (you won't be able to see it changing inside JSFiddle because it is inside an iframe) will end with index.html/#/. Everything after the hash symbol is a route for the vue-router. In this case, it is only a slash (/) and so it matches the first home route.

When we click on the links, the content of the <router-view> changes according to the component we associated with that route.

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.