vue选中后点击旁边选中的状态就会消失

Question

点中一个路由连接后是选中的状态 然后鼠标点击导航条以外任意的地方 当前选中状态的样式就消失了 路由什么的都没有变化就是刚才导航栏选中的样式没有了 这是怎么回事？我用的bootstrap的样式 这是bootstrap的原因还是vue的原因？

<div id="left">
    <router-link class="list-group-item" to="/product">product</router-link>
    <router-link class="list-group-item" to="/work">work</router-link>
    <router-link class="list-group-item" to="/contact">contact</router-link>
</div>

Answer 1

首先，这个不是bug，这个是人家bootstrap就是这样定的，知道什么叫focus状态吗？就是你点击了按钮，在你没有点别的地方的时候，这个按钮就是focus状态了。人家bootstrap就是定义了list-group-item这个组件的focus状态，并没有定你想要的路由激活的active状态，如果你想要这样的，你可以考虑定义一下vue-router的active-class，当你路由和你的<router-link>的to属性匹配的时候，就会激活你定义的那个class，可以考录定义成bootstrap的激活的按钮样式，如，

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

传送门

Answer 2

对的 是bootstrap的原因，现在链接的高亮是由bootstrap自己控制的。这个是不行的

高亮哪个链接需要由我们自己控制，我们需要在页面中监听路由的变化，然后高亮对应的链接按钮