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

Question

当我单击导航栏上的导航 link 时，它不会折叠。 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

这是代码的 header 部分。当单击汉堡包图标 class 'mobile-menu-wrapper visible-xs' 时，这将更改为 'mobile-menu-wrapper visible-xs expanded'。因为我认为它将更改为以前的 class 它可以解决问题。请建议我找到问题。

 <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 事件 link 以关闭导航栏，我没有看到您用于 open/close 导航栏的代码，但您可以发出像这样的事件：

让我们通过在 Nav 组件中添加 @closeNav 来监听父组件中的事件 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>

导航栏组件将在用户点击任何路由器时发出事件-link（您可以在任何其他 link 或按钮中添加事件）

<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>

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

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

Navigation bar (Mobile view) doesn't close after click - Vuejs

navbar

vue.js

routerlink