It is common practice and good user experience to provide some kind of visual cue in your site's navigation about the page currently being visited. For example, do you notice how the link for this Brazil page stands out just a little bit more than the other links? That's because we're on the Brazil page. How is that working?
Let's take a look. Let's inspect the code to see what is happening. You'll see that the Brazil page link has a router link active class on it. And then clicking through the different pages, that the class router link active is added to the right destination.
This class gets added automatically to the active link by the router link component. Nice. css file. And now we have active classes working.
If you don't like the default class name, you can of course create your own. js, add the name of the class you would like to use to the link active class property in the options object we use when creating the router. Let's call it view school active link. Or feel free to come up with anything you'd like.
Then we can create a style tag in the navigation dot view and give our custom active class whatever styling we'd like. I'll give it a red color and a border on the bottom. Over in the browser, let's see if it works. Awesome, now our active link is red and has a border on the bottom.
If you check in the DevTools, you will see our new ViewSchoolActiveLink class has been applied. That red's a little hard on the eyes though. Let's go ahead and set it back to the way it was. js.
To summarize, Vue Router takes care of the more involved parts of knowing what link corresponds to your current page and automatically adds a semantic class. That means making links to your current page stand out is as easy as applying some styles to the RouterActiveLink class.