導航欄在單擊菜單項上隱藏

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