Question

我正在尝试找出解决该问题的方法，但我不知道如何做。我的问题是，当我单击某些项目时，路由器视图已正确更改，但菜单仍处于打开状态。单击后我想关闭它。 This is my navbar component

    <template>
      <nav class="navbar-main">
        <!-- navigation button -->
        <div class="navbar-button" :class="{'is-active': isActive}" @click="isActive = !isActive">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="nav-menu" :class="{'is-active-menu': isActive}">
          <ul class="primary-menu">
            <li class="nav-menu-item">
              <router-link to="/" exact activeClass="link-active" class="nav-menu--link" tag="a">
                <i class="fas fa-home"></i>Home
              </router-link>
            </li>
            <li class="nav-menu-item">
              <router-link to="/about" activeClass="link-active" class="navbar-item" tag="a">
                <i class="fas fa-user"></i>About
              </router-link>
            </li>
            <li class="nav-menu-item">
              <router-link to="/resume" activeClass="link-active" class="navbar-item" tag="a">
                <i class="fas fa-address-card"></i>Resume
              </router-link>
            </li>
            <li class="nav-menu-item">
              <router-link to="/portfolio" activeClass="link-active" class="navbar-item">
                <i class="fas fa-briefcase"></i>Portfolio
              </router-link>
            </li>
          </ul>
          <!-- copyright text -->
          <div class="copy">
            <p>Copyright &copy; {{ new Date().getFullYear() }}</p>
            <p>All rights Reserved</p>
          </div>
        </div>
      </nav>
    </template>

    <script>
    export default {
      data() {
        return {
          isActive: false
        };
      }
    };
    </script>

Answer 1

您可以通过一些重构来解决此问题。添加关闭方法：

export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    close() {
      this.isActive = !this.isActive;
    },
  },
};

然后将其添加到您的主导航按钮：

<div class="navbar-button" :class="{ 'is-active': isActive }" @click="close">

然后转到您的每个链接（简化）：

<router-link to="/" @click="close">
<router-link to="/about" @click="close">

导航栏在单击菜单项上隐藏

1 个答案: