Bootstrap Navabar响应菜单在链接单击事件后不关闭栏

Question

我正在尝试使用"vue create sitoprova“命令创建的Vue js项目中的引导栏”我导入了这些库:依赖项“：{ " bootstrap "："^4.4.1"，"bootstrap-vue"："^2.13.0"，"core-js"："^3.6.4"，"firebase"："^7.14.2"，"jquery"："^3.4.1"，"materialize-css"："^1.0.0-rc.2"，"node-ipc"："^9.1.1"，

​

export default {
  name: "Navbar",
  props: {
    msg: String
  },
  components:{}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @media (min-width: 992px) { 
    
    .navbar.custom-nav{
      padding-top:16px;
      padding-bottom:16px;
      background-color: #fff !important;
    }

   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar custom-nav fixed-top navbar-expand-lg navbar-light bg-light">
     <div class="container">
        <router-link class="navbar-brand" to="/">Vue Shop</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/products" class="nav-link" href="#">Products</router-link>
            </li>

            <li class="nav-item">
              <router-link to="/about" class="nav-link" href="#">About</router-link>
            </li>
          
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <a class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#login">Get Start</a>
            <a class="btn btn-outline-info border-0 mx-2 my-2 my-sm-0" data-toggle="modal" data-target="#miniCart">
              <i class="fas fa-cart-plus"></i>
            </a>
          </form>
        </div>

     </div>

</nav>

​

"popper.js": "^1.16.1",
"run": "^1.4.0",
"serve": "^11.3.0",
"vue": "^2.6.11",
"vue-fire": "^0.1.0",
"vue-router": "^3.1.6",
"vue-simple-alert": "^1.1.1"

},

我读到过托管jquery to，但不知道该怎么做？你能帮帮我吗?非常感谢？

Answer 1

最后，我在这里找到了解决方案：

​

  name: "Navbar",
  props: {
    msg: String
  },
  methods : {
    close_navbar () {
  windows.$('.navbar-nav>router-link>').on('click', function(){
  windows.$('.navbar-collapse').collapse('hide');
});
    }


   },
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

​

不管怎样，谢谢你