How to VueJS router-link active style : <p>My page currently has Navigation.vue component.
I want to make the each navigation hover and active. The 'hover' works but 'active' doesn't. <br /><br />
This is how Navigation.vue file looks like :</p>

<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;nav class="navbar navbar-expand-lg fixed-top row"&gt;

                    &lt;router-link tag="li" class="col" class-active="active" to="/" exact&gt;TIME&lt;/router-link&gt;
                    &lt;router-link tag="li" class="col" class-active="active" to="/CNN" exact&gt;CNN&lt;/router-link&gt;
                    &lt;router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact&gt;TechCrunch&lt;/router-link&gt;
                    &lt;router-link tag="li" class="col" class-active="active" to="/BBCSport" exact&gt;BBC Sport&lt;/router-link&gt;
        &lt;/nav&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>And the following is the style.</p>

<pre><code>&lt;style&gt;

   nav li:hover,
   nav li:active{
      background-color: indianred;
      cursor: pointer;
    }

&lt;/style&gt;
</code></pre>

<p>This is how hover looks like now and expected exactly same on active.
<a href="https://i.stack.imgur.com/wOVg4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wOVg4.png" alt="This is how hover looks like now and expected exactly same on active."></a></p>

<p>I would appreciate if you give me an advice for styling router-link active works.
Thanks.</p>
