Question

我正在使用Vue JS构建SPA，并且我的Sidebar组件遇到了一些问题。我的下拉菜单的默认功能-打开子菜单-已被Vue覆盖。当我单击锚点时，URL就像在单击路线时一样被更新。

我尝试添加@click.stop，但不起作用。

Sidebar.vue

<template>
  <div class="sidebar">
    <div class="main-menu">
      <div class="scroll">
        <ul class="list-unstyled">
          <li>
            <a href="#start" data-target="#start" @click.stop>
              <i class="iconsminds-shop-4"></i>
              <span>Dore</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="sub-menu">
      <div class="scroll">
        <ul class="list-unstyled" data-link="start">
          <li>
            <a href="Dore.Start.html">
              <i class="simple-icon-briefcase"></i> Start
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  name: 'Sidebar',
  data () {
    return {

    }
  }
}
</script>

Answer 1

这个问题有点模棱两可，但是如果我对您的理解是正确的，那么您是在尝试阻止在单击a元素时发生导航吗？

如果是这种情况，请尝试使用prevent修饰符（@click.prevent）而不是@click.stop，因为后者将阻止事件传播给父母，而不是阻止默认行为。

文档：https://vuejs.org/v2/guide/events.html#Event-Modifiers

Vue SPA覆盖下拉菜单

1 个答案: