Vue路由器-beforeEach，检测点击相同路径答案

【问题标题】：Vue router - beforeEach, detect click on same pathVue路由器-beforeEach，检测点击相同路径
【发布时间】：2019-03-27 07:26:57
【问题描述】：

我的路线上有一个 beforeeach

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

它所做的只是在点击任何路线时关闭侧边栏。

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

我遇到的问题是当我打开侧边栏并单击相同的链接时，因为路线没有改变 beforeEach 没有被调用。如何强制 vuerouter 检测任何更改？

【问题讨论】：

可以在侧边栏项目被点击时触发侧边栏组件中的方法。侧边栏组件第一次渲染时侧边栏关闭，然后单击侧边栏项目时，切换侧边栏。
是的，但我真的不想。

标签： vue.js vuejs2 vue-router

【解决方案1】：

我遇到了类似的问题，这是 我的 2 美分。

从用户体验的角度来看，切换侧边栏“在侧边栏链接/项目单击时”不是一个好的解决方案。

即使侧边栏是打开的，并且您通过单击当前路径上指向的链接将其关闭，您将如何再次打开侧边栏？

就我的情况而言，我在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
  }
}

希望对你有帮助。

【讨论】：