vue2中使用bootsrap3的响应式导航li如何关闭？

Question

在vue中使用bootstrap3写了个响应式导航，navbar-toggle点击显示之后，点击列表中的路由跳转了，但是列表不关闭，这样我只能通过js来控制关闭，但是在vue中应该怎么写？

    <nav class="nav navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!--此处应该是个模板放logo-->
    <div class="navbar-header">
      <a href="javascript:void(0);" class="navbar-brand logo-wrapper">
        <logo></logo>
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="item"><router-link to="/home">首页</router-link></li>
          <li class="item"><router-link to="/huiChat">蕙聊直播</router-link></li>
          <li class="item"><router-link to="/huiHealth">蕙健康</router-link></li>
          <li class="item"><router-link to="/huiShop">蕙商城</router-link></li>
        </ul>
        <!-- 右侧登陆插件的 -->
        <div class="nav navbar-nav navbar-right login-wrapper">
          <login></login>
        </div>
    </div>
  </div>
</nav>

效果如图

点击了路由跳转了 但是列表不收起来，还有就是 这个li的样式我写在了响应式里面，但是没有效果。

@media (max-width:767px) 
.collapse
  .item
    width 100%
    &:hover
      background #e1e1e1
    .router-link-active
      color #FE007F
      border-bottom none
.login-wrapper
  display: block
  

登录注册模块如果不写在列表中会被换行，但写在里面屏幕缩小的时候就会在最后，我依然想放在导航栏，请问我这里该怎么调整呢？
我最终想实现的
1小屏幕下点击菜单切换路由后自己关闭菜单列表
2.小屏幕下菜单栏中文字居中
3.小屏幕的时候 登陆放在导航栏右侧，菜单按钮在左侧，并且在正常尺寸的时候不会被挤下来。
捣鼓一下午了，求各位大大给点思路、

Answer 1

第一个问题暂时的解决方案，为菜单按钮添加 ref="toggle",
然后为每个菜单添加点击事件，通过this.$refs.toggle.click()实现触发切换菜单栏状态，但是在宽屏模式下点击会有菜单收回的动画。
第二次修改，检测到每次点击标签为collapse navbar-collapse增加一个 in的属性用于列表的展示和隐藏
因此在data中定义 isShow=false
给button增加点击事件设为true,
给每个列表增加点击事件为false 然后给collapse navbar-collapse 绑定class in的状态就好了