点击项目后如何关闭导航抽屉？

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事件，我认为这可能是最有效的方法，但我不知道是否可以，因为我已经在使用它了。我不太擅长编程，有什么建议吗？

这是Codepen链接：https://codesandbox.io/s/gameshelf-0209-jack-forked-zobe5 你可以在NavBarMobile.vue中找到该组件。

感谢您花时间阅读这篇文章！

- Stefano Primerano

Answer 1

有几种方法可以实现这个功能。在我看来，最简单的方法是从 App.vue 中“观察” $route 对象：

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

Vue实例上的watch属性包含能够监听同名变量的函数。当变量发生改变时，该函数会被执行。

有关监听器和计算属性的更多信息，请参见：https://v2.vuejs.org/v2/guide/computed.html 编辑：有关对路由更改的反应的一些额外信息：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

- Ollie

---

谢谢，它完美无缺地运行了！非常感谢您提供的链接，我现在就去查看它们！ - Stefano Primerano

@StefanoPrimerano，很高兴它起作用了！祝你的应用程序好运。我喜欢整个应用程序的风格！ :) - Ollie

Answer 2

另一种实现的方法是从子组件中发出事件。

• 第一步将点击事件指向一个处理逻辑的方法，如下所示：

注：保留html标签，不作修改。

<ul v-for="item in tabs" :key="item.path" active-class @click="redirect(item.path)">

• 然后在你的脚本中添加一个方法，从你的NavBarMobile组件中发出自定义事件：

methods: {
        redirect(path) {
            this.$router.push(path)
            this.$emit('change', false)
        }
    },

最后，从父组件监听此事件：

<NavBarMobile v-if="mobileView" @change="showNav = $event"/>

- jcoleau

---

谢谢你提供的替代方案！它让我对如何解决这个问题有了更广阔的视野。 - Stefano Primerano

很高兴能为您服务。我认为您不擅长编程的评论并不相关。 - jcoleau