Блог

Есть ли способ отключить переходы мобильного меню при изменении маршрута страницы в моем приложении? При первоначальной сборке я заметил, что меню останется открытым, когда я изменю маршрут страницы. Затем я добавил средство наблюдения за маршрутом, чтобы «закрыть» меню при изменении маршрута страницы, которое работает, однако при изменении маршрута страницы маршрут изменяется, а затем мобильное меню применяет свои переходы 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>
 

Вы можете добавить новый класс notransition , когда маршрут немедленно изменится. затем удалите этот класс, чтобы переход мог работать нормально.

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