vue-router如何处理vlink点击时候的activeClass

Question

场景是vue-router里面点击一个vlink触发选中class ，看文档里面有个linkActiveClass属性 配置它后 点击并没有加上对应的class 我就不得其解了 。

Answer 1

这里的demo中有可以出现active link class的case，也有不能出现的case，看能不能帮到你
https://jsfiddle.net/oe7axeab/670/

Answer 2

http://vuejs.github.io/vue-router/zh-cn/...

链接活跃时的 class .v-link-active

Answer 3

我也是遇见你这样的问题

Answer 4

好像是里面嵌套东西了的话就出现不了。该怎么解决呢？

Answer 5

需要使用 v-for 来渲染<router-link>,例如

<router-link
    v-for="item in list"
    :key="item.id"
    :to="item.path"
>
</router-link>

而不是嵌入都某个元素中，例如:

<div
    v-for="item in list"
    :key="item.id"
 >
    <router-link
        :to="item.path"
     >
    </router-link>
</div>

这种情况下，router-link-exact-active 和 router-link-active 不会添加到calss属性上

如果具体原理需要去查看下 vue-router 的源码，有空再补。

Answer 6

const router = new VueRouter({
routes: [{

path: '/goods',
component: goods

}, {

path: '/ratings',
component: ratings

}, {

path: '/seller',
component: seller

}],
linkActiveClass: 'active'
})
才发现用linkActiveClass属性就可以了。然后其他的就是写样式了