Single Page Applications Chapter 15How 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
component we associated with that route.
There's more...
The astute reader will certainly find what can be interpreted as a bug--we added a couple of
CSS styles before running the application. The .router-link-active class is
automatically injected in the
to the link actually pointed to.
When we click on Menu and Bar, the background color changes but it seems that it remains
stuck to be selected for the Home link. This is because the matching performed by the
string and, for this reason, / is always matched.
A quick fix for this is to add the attribute exactly the same as the first
<li><router-link to="/" exact>Home</router-link></li>Now, the Home link is highlighted only when the route exactly matches the home page link.
Another thing to note is the rule itself:
a.router-link-active, li.router-link-active>a {
background-color: gainsboro;
}