如何VueJS路由器链接活动样式

我的页面当前具有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>

这就是现在的悬停状态，并且在活动状态下的悬停状态完全相同。

如果您给我有关路由器链接有效作品样式的建议，我将不胜感激。谢谢。