有条件地阻止Vue中的点击事件答案

【问题标题】：Prevent click event in Vue conditonally有条件地阻止Vue中的点击事件
【发布时间】：2020-11-30 15:46:51
【问题描述】：

当我的移动导航按预期工作时，我正在禁用文档正文滚动。但是，当用户单击指向另一个路线/页面的链接时，它并没有消除隐藏的溢出。我创建了一个简单的方法来删除在菜单打开时在导航中单击链接时隐藏的溢出，这确实适用于一个小警告。当用户在说页面“主页”并且移动导航处于打开状态时，当他们单击移动导航内部的“主页”链接时，它正在关闭菜单，我知道我已经用我创建的方法做到了这一点。单击您所在页面的链接时，有没有办法阻止该事件触发？

 <header :class="{ 'header-active': activeHamburger }">

    <nav class="nav-row nav-row--primary" aria-label="Main Navigation">
    <ul class="row--flex justify--space-between">
        <li>
            <router-link to="/" @click="removeOverflowHidden();
          ">
                home
            </router-link>
        </li>
        <li>
            <router-link to="About" @click="removeOverflowHidden();
          ">
                about
            </router-link>
        </li>
        <li>
            <router-link to="Work" @click="removeOverflowHidden();
          ">
                work
            </router-link>
        </li>
        <li>
            <router-link to="Contact" @click="removeOverflowHidden();
          ">
                contact
            </router-link>
        </li>
    </ul>
</nav>
</header>


data() {
    return {
      activeHamburger: false
    };
  },
  watch: {
    activeHamburger: function() {
      if (this.activeHamburger) {
        document.documentElement.style.overflow = "hidden";
        return;
      }
      document.documentElement.style.overflow = "auto";
    }
  },
methods:{
 removeOverflowHidden() {
      this.activeHamburger = false;
    }
}

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

您可以将路由值传递给方法，并在执行前检查它是否与当前路由不同。

 <template>
 <header :class="{ 'header-active': activeHamburger }">

    <nav class="nav-row nav-row--primary" aria-label="Main Navigation">
    <ul class="row--flex justify--space-between">
        <li>
            <router-link to="/" @click="removeOverflowHidden('home');
          ">
                home
            </router-link>
        </li>
        <li>
            <router-link to="About" @click="removeOverflowHidden('about');
          ">
                about
            </router-link>
        </li>
        <li>
            <router-link to="Work" @click="removeOverflowHidden('work');
          ">
                work
            </router-link>
        </li>
        <li>
            <router-link to="Contact" @click="removeOverflowHidden('contact');
          ">
                contact
            </router-link>
        </li>
    </ul>
</nav>
</header>
</template>
<script>
export default {
 data() {
    return {
      activeHamburger: false
    };
  },
  watch: {
    activeHamburger: function() {
      if (this.activeHamburger) {
        document.documentElement.style.overflow = "hidden";
        return;
      }
      document.documentElement.style.overflow = "auto";
    }
  },
  methods:{
    removeOverflowHidden(value) {
      if (this.$route.path !== value) {
      this.activeHamburger = false;
      }
    }
  } 
}
</script>

我还没有看到您的路线，但您也可以使用 this.$route.name，如果您愿意并相应地调整您传递给方法的值。

【讨论】：