В моей странице в настоящее время имеется компонент Navigation.vue.
Я хочу, чтобы каждый навигация и активный навигация. "Наведение" работает, но "активный" - нет.
Вот как выглядит файл Navigation.vue:
<template>
<div>
<nav class="navbar navbar-expand-lg fixed-top row">
<router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
<router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
<router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
<router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
</nav>
</div>
</template>
И вот стиль.
<style>
nav li:hover,
nav li:active{
background-color: indianred;
cursor: pointer;
}
</style>
Вот как выглядит зависание сейчас и ожидалось точно так же в активном режиме.
Я был бы признателен, если бы вы дали мне совет по стилизации работы роутера-ссылки. Спасибо.