时间戳

首页 > 解决方案 > VueJS将活动类附加到li标签而不是标签

javascript - VueJS将活动类附加到li标签而不是标签

问题描述

嗨，我想让 li 在发送 /support 路由时有一类活动。开箱即用的活动类仅适用于路由器链接，也就是标签。谢谢！

<ul>
 <li class="nav-item" >
         
                <router-link  to="/support" class="nav-link d-flex align-items-center justify-content-between">
                  <span>
                    <span class="sidebar-icon"
                      ><span class="fas fa-life-ring"></span
                    ></span>
                    Support
                  </span>
                </router-link>
              </li>
            </ul>

标签： javascriptcssvue.js

解决方案

我认为您应该删除<li>标签并将标签道具传递给您的 <router-link>

像这样更改您的代码：

<ul>
      <router-link to="/support" tag="li" class="nav-link d-flex align-items-center justify-content-between" active-class="some-active-class" exact>
         <span>
         <span class="sidebar-icon"
            ><span class="fas fa-life-ring"></span
            ></span>
         Support
         </span>
      </router-link>
</ul>

对于您的活动链接的样式，您可以使用active-class道具

.some-active-class{
 color: red;
}

如果您想了解有关路由器链接道具的更多信息，请参阅文档：https ://router.vuejs.org/api/#router-link-props

推荐阅读