Introducing Vue-Router and Loading URL-Based Components Chapter 8If you inspect the links with the browser's HTML inspector, you will notice the change in
CSS classes. The Home link will always have a class of router-link-active—this is
because it is either active itself, or it has an active child, such as the About page. There is
another CSS class which gets added and removed as you navigate between the two
pages—router-link-exact-active. This only gets applied to the links on the currently
active page.
Let's customize the classes that get applied to the view. Head to the initialization of the
router in your JavaScript and add two new keys to the object - linkActiveClass
and linkExactActiveClass:
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
],
linkActiveClass: 'active',
linkExactActiveClass: 'current'
});The keys should be fairly self-explanatory, but linkExactActiveClass gets applied to the
current page, the one being viewed, while linkActiveClass is the class that gets applied
when the page, or one of its children, is active.
Linking to sub-routes
There may be times you want to have links to children pages. For example /about/meet-
the-team. Fortunately, there is not much work required to get this working. Create a new
object in the routes array, pointing to a new component with a template:
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',