时间戳

首页 > 解决方案 > Vue删除路由观察器上的类

javascript - Vue删除路由观察器上的类

问题描述

我在 Vue 构建中遇到了一个移动下拉菜单的小问题。我正在使用最大高度过渡来为汉堡图标的单击事件的下拉菜单设置动画。按预期工作，但我的问题是当我单击不同的页面路由时，页面路由会更改，然后此过渡动画再次触发。有没有办法让菜单关闭而不改变页面路径的转换？我想要一个更干净的更改，单击路由器 > 转到页面 > 菜单关闭而不转换。

<!-- main nav -->
<ul class="row--flex main-navigation" :class="{ 'is-open': activeMenu }">
    <!-- nav item -->
    <li class="nav-item">Nav Item
    </li>
    <!-- nav item -->
    <li class="nav-item">Nav Item
    </li>
    <!-- nav item -->
    <li class="nav-item">Nav Item
    </li>
</ul>


export default {
  name: "Navigation",
  components: {
    Menu
  },
  data() {
    return {    
      activeMenu: false,    
    };
  },
 watch: {
    $route() {
      this.activeMenu = false;
    }
  }
};

CSS：

 .main-navigation {
    z-index: 2;

    display: flex;
    justify-content: space-between;

    width: 100%;
    max-width: 763px;

    @media (max-width: $mobileMax) {
      position: absolute;
      top: 100%;
      left: 0;

      overflow: hidden;
      align-items: flex-start;
      flex-direction: column;

      width: 100vw;
      max-width: 100vw;
      max-height: 0;
      margin: 0 calc(-50vw + 50%);

      transition: max-height 0.5s ease-in-out;
    }
  }

  @media (max-width: $mobileMax) {
    .is-open {
      max-height: 273px; 
    }
  }

标签： javascriptcssvue.jsnuxt.js

解决方案

推荐阅读