Vue在路线更改时禁用移动菜单转换？

Question

在我的应用中更改页面路径时，有没有办法禁用我的移动菜单转换？在初始构建时，我注意到当我更改页面路径时菜单会保持打开状态。然后我添加了一个路由观察器来“关闭”页面路由更改时的菜单，但是当页面路由更改时路由更改，然后移动菜单应用其 vue 转换并在页面已经更改后关闭，这不是结束世界上的，但对我来说有点笨拙。您如何关闭菜单并避免过渡？

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

其中一个菜单项：

 <transition :name="menuTransition">
              <ul
                class="dropdown-menu"
              >
                <li>
                  <router-link to="/page2"
                    >Page 2</router-link
                  >
                </li>
              </ul>
            </transition>

Answer 1

当路由立即改变时，您可以添加一个新类notransition。然后删除该类，以便转换可以正常工作。

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}