router-link-exact-active不会在点击时显示样式

Question

我正在开发带有router-link的侧边菜单，并且想要更改背景，但是它不起作用

    <div data-color="green" data-image="img/sidebar-2.jpg" data-background-color="black" class="sidebar ps" style="background-image: url(&quot;img/sidebar-2.jpg&quot;);">

        <div class="sidebar-wrapper ps ps--active-x">

            <ul class="md-list nav md-theme-default">
                <li class="nav-item ">
                    <!---->
                    <!----><router-link to="/customer" class="nav-link"><i class="far fa-chart-bar"></i><p>Dashboard</p></router-link></li>

                <li><router-link to="/menu_card" class="nav-link sidebar-menu-item"><i class="fas fa-utensils"></i><p>MenuCard</p></router-link></li>

      优惠       

<!---->

      订单       

      订座       

      派对服务       

        评论       

         

收入

         

发票

<li >
<!---->
<!----><router-link to="/POS" ><i class="fas fa-calculator"></i><p>POS-System</p></router-link></li>    

    </div>
</div>`.

.router-link-exact-active > span>i,
.router-link-exact-active
{
    color: #FFFFFF;
    background-color:green;
}

.router-link-exact-active >p
{
    color: #FFFFFF;
}