All language subtitles for 6. Styling Active Links

Now let's use these special CSS classes,

which are added by router-link to the created anchor tag.

And for that here in TheNavigation.vue

I will actually add a new selector here

to this hover and active rule.

And the that's anchor tag,

which has the router-link-active class on it.

So a.router-link-active,

this tells CSS that I want to apply these styles

to every anchor tag, which has this CSS class on it.

And if I do that and saved this,

you now notice Users is highlighted.

If I click on Teams that stays highlighted,

and that's how you can reflect on your page visually

on your links, which link is currently active.

Now as a side note,

you have two classes on their router-link-active,

which I'm using for styling here,

but also router-link-exact-active.

Now, the difference is that router-link-active

would also be applied to this item here.

If we had something like Teams, Team ID.

So if we had some nested route to this route here,

now we have learned about nested routes yet,

so for in a moment, we can just ignore that.

But the difference is that router-link-exact-active

will only be applied to the navigation item

that's fully matched by the current path.

Whereas router-link-active

will be applied to any navigation item,

which contains a part of the currently active route.

At the moment, we have no situation

where we would have nested routes.

So at the moment it's either both or nothing,

but later we'll see the difference in action.

For the moment, it's just important

to be aware of these classes,

which helped you style your application.

You can also change those default classes

in case you're not happy with them

in main JS, where you create the router,

you got more config options,

and you've gotta linkActive

and a linkExactActiveClass option,

where you can use any other CSS class name

you might wanna use

instead of their router-link-active class,

which would be the default.

So if you want to go with just active, for example,

you could override this here.

And I'm doing that here so that we see it in action.

I'm setting the active class to just active.

And that means I need to change my styling here

and select the anchor tag with the active class on it.

And with that it still works.

And now you can tell it's the active class

besides the router-link-exact-active class

that's being added.

So you can configure things like that.

But with that, let's move on

and let's not focus too much on the styling here.

Instead, let's dig a bit deeper into the router

and learn more about the different options we have here

and the different kinds of routes we can register.