javascript - 单击项目后关闭抽屉导航？

Question

我正在研究一个大学项目，并尝试实现一项功能，允许在我单击其中的一个项目时关闭抽屉导航。但是，我不确定如何处理。

    <template>
  <div id="navigation-mobile">
    <Searchbar class="search"/>
    <ul v-for="item in tabs"
            :key="item.path"
            active-class
            @click="$router.push(item.path)"
    >
      <li>{{item.name}}</li>
    </ul>
    <div class="mobile-footer">
      <ul>
        <li>About us</li>
        <li>Contact us</li>
      </ul>
    </div>
  </div>
</template>

这是我在 App.vue 中的内容，其中包含抽屉导航的一部分:

<template>
  <v-app id="app">
    <NavBarMobile v-if="mobileView"/>
    <div class="content" :class="{'open': showNav}">
      <div style="height:20px"></div>
      <div id="navigation-icon" v-if="mobileView"
      @click="showNav = !showNav">
        <v-icon medium dark>menu</v-icon>
      </div>
      <NavBar v-if="!mobileView"></NavBar>
      <v-content class="pa-0" transition="slide-x-transition"></v-content>
      <Footer v-if="!mobileView"></Footer>
      <router-view></router-view>
    </div>
  </v-app>
</template>

到目前为止，这是我的代码。我想使用@click，我认为这是最有效的方法，但我不知道是否可以，因为我已经在使用它了。我不太擅长编程。有什么建议吗？

这是代码笔:https://codesandbox.io/s/gameshelf-0209-jack-forked-zobe5

您可以在 NavBarMobile.vue 中找到该组件

提前感谢您花时间阅读这篇文章!

Answer 1

您可以通过多种方式实现这一目标。在我看来，最简单的方法就是从 App.vue 中简单地“观察”$route 对象:

export default {
  // ...
  watch: {
    $route(to, from) {
      this.showNav = false
    }
  }
}

Vue 实例上的 watch 属性包含监视同名变量变化的函数。更改后，该函数将运行。

有关观察者和计算属性的更多信息:https://v2.vuejs.org/v2/guide/computed.html

编辑:关于对路由器变化作出 react 的一些额外信息:https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes