javascript - Vue SPA 覆盖下拉菜单

Question

我正在使用 Vue JS 构建 SPA，但我的侧边栏组件遇到了一些问题。我的下拉菜单的默认功能 - 打开子菜单 - 被 Vue 覆盖。当我单击 anchor 时，网址会更新，就像我单击路线一样。

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

侧边栏.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，因为后者会阻止事件传播给 parent ，而不是阻止默认行为。

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