Vue router - beforeEach, обнаруживать клики по тому же пути - PullRequest
Новая
       8

Vue router - beforeEach, обнаруживать клики по тому же пути

0 голосов
/ 23 октября 2018

У меня есть предварительная поездка по моим маршрутам 

router.beforeEach((to, from, next) => {
  store.commit('sidebar_open', false);
  next();
})

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

<router-link
  :key="$route.path"
  to="home"
>
 Home
</router-link>

Проблема, возникающая при открытиибоковую панель и нажмите ту же ссылку, потому что маршрут не меняется, beforeEach не вызывается.Как я могу заставить vuerouter обнаруживать любые изменения?

1 Ответ

0 голосов
/ 23 октября 2018

У меня была похожая проблема, и вот мои 2 цента .

С подставки UX не очень хорошее решение переключить боковую панель "на ссылку / элемент боковой панели.".

Даже если боковая панель открыта, и вы закрываете ее, нажимая на ссылку, которая указывает на текущий путь, как бы вы снова открыли боковую панель?

Начиная сВ моей ситуации я использую ту же логику в моем router.js: 

router.beforeEach((to, from, next) => {
  store.commit('toggleSidebar', true)
  //other logic
})

И в моем Sidebar.vue компоненте у меня есть только вычисленный метод для извлечения текущего значения toggleSidebar: 

<template>
  <aside :class="{close: getSidebar}">
    <!-- other markup -->
  </aside>
</template>

...

computed: {
  getSidebar() {
    return this.$store.state.isSidebarClosed
  }
}

А теперь, чтобы переключить боковую панель, у меня есть Navigation.vue компоненты (заголовок), у которых есть кнопка для этого: 

<button type="button" @click="toggleSidebar">
   <span v-if="sidebarStatus" class="hamburger-icon"></span>
   <span v-else class="close-icon"></span>
</button>

...

methods: {
  toggleSidebar() {
    this.$store.commit('toggleSidebar', !this.$store.state.isSidebarClosed)
  }
},
computed: {
  sidebarStatus() {
    return this.$store.state.isSidebarClosed
  }
}

Надеюсь, это поможет.

...