Question

我的路线上有事前事

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

所有操作都是在单击任何路由时关闭边栏。

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

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

Answer 1

我遇到了类似的问题，这是我的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
  }
}

希望有帮助。

Vue路由器-每次检测到相同路径上的点击

1 个答案: