单击后导航栏（移动视图）不关闭 - Vuejs

Question

当我单击导航栏上的导航链接时，它不会折叠。 Vue 版本 2.6.10。

    <template>
  <div class="nav-wrapper">
    <nav>
      <ul>
        <li v-for="(route, index) in routings" :key="index">
          <router-link :to="route.url">{{route.name}}</router-link>
        </li>
        <li>
          <a href="https://blog.inquest.io/" target="_blank">Blog</a>
        </li>
        <li class="visible-xs">
          <Button v-if="!isLoggedIn" :label="loginButtonLabel" :isFilled="true" :action="goToLogin"/>
          <UserWidget v-else :email="setFirstName" :title="'administrator'" :isUserMenu="true" :action="gotoDashboard"/>
        </li>
      </ul>
    </nav>
  </div>
</template>

This is the navbar what i talk about

这是代码的标题部分。当单击汉堡包图标类“mobile-menu-wrapper visible-xs”时，这将更改为“mobile-menu-wrapper visible-xs expand”。在那里我认为它会改变到以前的课程来解决这个问题。请告诉我找出问题所在。

 <template>
      <div class="header-wrapper">
        <div class="header-container container">
          <Logo/>
          <Nav class="hidden-xs" :routings="routings"/>
          <Button v-if="!isLoggedIn" class="hidden-xs" :label="isLoggedIn ? 'Console' : 'Login / Sign-up'" :isFilled="true" :action="goToLogin"/>
          <UserWidget class="hidden-xs" v-if="isLoggedIn" :email="setFirstName" :title="'administrator'" :isUserMenu="true" :action="gotoDashboard"/>
          <div class="mobile-menu-icon-wrapper visible-xs" @click="getMobileMenu">
            <i v-if="isMenuExpanded" class="mobile-menu-icon close-icon"></i>
            <i v-if="!isMenuExpanded" class="mobile-menu-icon expand-icons"></i>
          </div>
          <div class="mobile-menu-wrapper visible-xs" :class="{'expanded': isMenuExpanded}">
            <div class="menu-overlay" @click="getMobileMenu"></div>
            <Nav :routings="routings" :eventBus="eventBus" :adminDetails="adminDetails" :isLoggedIn="isLoggedIn"/>
            <div class="mobile-menu-icon-wrapper" @click="getMobileMenu">
              <i v-if="isMenuExpanded" class="mobile-menu-icon close-icon"></i>
            </div>
          </div>
        </div>
      </div>
    </template>

Answer 1

尝试在您的路由器链接中添加一个 onclick 事件以关闭导航栏，我没有看到您用于打开/关闭导航的代码，但您可以发出这样的事件：

让我们在父组件中监听事件closeNav，在Nav组件中添加@closeNav：

<template>
  <div class="header-wrapper">
    <div class="header-container container">
      <Logo/>
      <Nav class="hidden-xs" :routings="routings"/>
      <Button v-if="!isLoggedIn" class="hidden-xs" :label="isLoggedIn ? 'Console' : 'Login / Sign-up'" :isFilled="true" :action="goToLogin"/>
      <UserWidget class="hidden-xs" v-if="isLoggedIn" :email="setFirstName" :title="'administrator'" :isUserMenu="true" :action="gotoDashboard"/>
      <div class="mobile-menu-icon-wrapper visible-xs" @click="getMobileMenu">
        <i v-if="isMenuExpanded" class="mobile-menu-icon close-icon"></i>
        <i v-if="!isMenuExpanded" class="mobile-menu-icon expand-icons"></i>
      </div>
      <div class="mobile-menu-wrapper visible-xs" :class="{'expanded': isMenuExpanded}">
        <div class="menu-overlay" @click="getMobileMenu"></div>
        
        <!-- here is part of the magic -->
        <!-- alternative one, update isMenuExpanded directly -->
        <Nav :routings="routings" :eventBus="eventBus" :adminDetails="adminDetails" :isLoggedIn="isLoggedIn" @closeNav="isMenuExpanded = false"/>

        <!-- alternative two, update isMenuExpanded using the closeNavBar method -->
        <!--<Nav :routings="routings" :eventBus="eventBus" :adminDetails="adminDetails" :isLoggedIn="isLoggedIn" @closeNav="closeNavBar"/> -->
        
        <div class="mobile-menu-icon-wrapper" @click="getMobileMenu">
          <i v-if="isMenuExpanded" class="mobile-menu-icon close-icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  ...
  methods: {
    // alternative using method
    closeNavBar() {
      this.isMenuExpanded = false;
    }
  }
  ...
}
</script>

一旦用户单击任何路由器链接，导航栏组件就会发出事件（您可以在任何其他链接或按钮中添加事件）

<template>
  <div class="nav-wrapper">
    <nav>
      <ul>
        <li v-for="(route, index) in routings" :key="index">

          <!-- emit the event to close the navBar -->
          <!-- emit directly in the tag -->
          <router-link :to="route.url" @click="$emit('closeNav')">{{route.name}}</router-link>

          <!-- emit by using a method -->
          <!--<router-link :to="route.url" @click="closeNavBarFromChild">{{route.name}}</router-link>-->
        </li>
        <li>
          <a href="https://blog.inquest.io/" target="_blank">Blog</a>
        </li>
        <li class="visible-xs">
          <Button v-if="!isLoggedIn" :label="loginButtonLabel" :isFilled="true" :action="goToLogin"/>
          <UserWidget v-else :email="setFirstName" :title="'administrator'" :isUserMenu="true" :action="gotoDashboard"/>
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
  ...
  methods: {
    closeNavBarFromChild() {
      this.$emit('closeNav') // Emit the event that the parent is listening
    }
  }
  ...
</script>

我写了两种使用事件的方法，但是它们的效果是一样的。