vue-router中的router-link如何判断当前是否激活

Question

如类似下面的需求，应当如何实现

    <router-link v-for="item in tabList" :to="{path: item.path}">
        <span class="active">激活</span> 
        <span class="no-active">未激活</span>
    </router-link>

我本想用v-if来实现，看官方文档没发现有这个参数可以用来判断。

注： 1. 除了用css, 我知道可以用.router-link-active .no-active { display: none}等来实现，但是不想这么做，因为如果有几个这样要判断的地方，岂不是每个部分都要好几个css来实现，太不优雅了

1. 本来想用v-if来实现，如此即便是几个地方要判断，都用同一参数来v-if判断下就可以。不是更方便么。

Answer 1

你可以在路由里存储name,this.$router.name就能取到路由的名字

Answer 2

可以这样写

<router-link v-for="item in tabList" :to="{path: item.path}">
  <span :class="{active: item.path === $route.path}">激活</span> 
  <span :class="{no-active: item.path !== $route.path}">未激活</span>
</router-link>

Answer 3

好好看文档。。。。https://router.vuejs.org/zh-c...