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

fcxh
  • 434

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

    <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判断下就可以。不是更方便么。
回复
阅读 9.3k
3 个回答

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

可以这样写

<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏