Vue.js中如何在router-link包含active类时切换显示对应图标

现有代码问题 #

• 所有导航项共用同一个active状态变量，无法独立区分每个路由的激活状态
• 为两种状态重复声明<router-link>，代码冗余可维护性差
• 未给<router-link>指定to属性，无法通过路由匹配自动触发active类的添加

方案1：CSS控制（最优） #

不用修改JS逻辑，仅通过类选择器控制图标显隐，性能最高。

模板代码 #

<li>
  <router-link to="/path1" active-class="active">
    <span class="icon-default">Icon 1</span>
    <span class="icon-active">Icon 1 active</span>
  </router-link>
</li>
<li>
  <router-link to="/path2" active-class="active">
    <span class="icon-default">Icon 2</span>
    <span class="icon-active">Icon 2 active</span>
  </router-link>
</li>
<li>
  <router-link to="/path3" active-class="active">
    <span class="icon-default">Icon 3</span>
    <span class="icon-active">Icon 3 active</span>
  </router-link>
</li>

CSS代码 #

/* 默认隐藏激活态图标 */
.router-link .icon-active {
  display: none;
}
/* 激活时切换显隐状态 */
.router-link.active .icon-default {
  display: none;
}
.router-link.active .icon-active {
  display: inline-block;
}

只要将第一个<router-link>的to属性设置为应用默认路由路径，进入页面时就会自动激活第一个图标。

方案2：利用<router-link> v-slot获取激活状态（Vue Router 3.1+支持） #

如果需要在模板里直接拿到激活状态做更多逻辑处理，可以用官方提供的插槽API：

<li>
  <router-link to="/path1" v-slot="{ isActive }">
    {{ isActive ? 'Icon 1 active' : 'Icon 1' }}
  </router-link>
</li>
<li>
  <router-link to="/path2" v-slot="{ isActive }">
    {{ isActive ? 'Icon 2 active' : 'Icon 2' }}
  </router-link>
</li>
<li>
  <router-link to="/path3" v-slot="{ isActive }">
    {{ isActive ? 'Icon 3 active' : 'Icon 3' }}
  </router-link>
</li>

内容的提问来源于stack exchange，提问作者Phúc Trần