Vue SPA侧边栏下拉菜单默认功能被覆盖问题求助

Hey there! I see the issue you're facing with your Vue SPA sidebar—when clicking anchor links, Vue's router is hijacking the default dropdown behavior and updating the URL like a route jump, and @click.stop isn't fixing it. Let's break this down and get it sorted.

Why @click.stop Isn't Working #

Vue Router automatically intercepts clicks on <a> tags that have relative href values (like your #start), treating them as route navigation instead of native anchor behavior. The @click.stop directive only prevents event bubbling up the DOM tree, but it doesn't stop Vue Router's default handling of the click event (which is listening at a higher level, often on the document).

Solution: Prevent Default Behavior + Handle Anchor Scroll (If Needed) #

To fix this, we need to prevent the default browser navigation action for these anchor links, and optionally handle the scroll-to-anchor behavior manually since we're overriding the default.

Here's how to adjust your Sidebar.vue component:

<template>
<div class="sidebar">
  <div class="main-menu">
    <div class="scroll">
      <ul class="list-unstyled">
        <li>
          <!-- Use @click.prevent to stop default navigation, and add a method to handle scroll -->
          <a href="#start" data-target="#start" @click.prevent="scrollToAnchor('start')">
            <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>
          <!-- If this is an external file link, add target="_blank" to avoid Vue interference -->
          <a href="Dore.Start.html" target="_blank">
            <i class="simple-icon-briefcase"></i> Start
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Sidebar',
  methods: {
    scrollToAnchor(anchorId) {
      const element = document.getElementById(anchorId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' }); // Optional smooth scroll effect
      }
    }
  }
}
</script>

Key Changes Explained: #

• @click.prevent: This directive calls event.preventDefault() on the click event, stopping Vue Router from treating the anchor as a route and updating the URL.
• Manual Scroll Method: Since we blocked the default anchor scroll, the scrollToAnchor method finds the element by ID and scrolls to it (you can remove the behavior: 'smooth' if you prefer instant scrolling).
• External Link Note: For your Dore.Start.html link, adding target="_blank" ensures it opens correctly as an external file without Vue interfering. If it's supposed to be a route within your SPA, you should use <router-link> instead of a raw <a> tag.

Alternative: Disable Router Link Interception Globally #

If you have multiple anchor links and don't want to add @click.prevent to each, you can configure Vue Router to ignore anchor links by modifying your router setup:

const router = createRouter({
  // ... your existing router config
  scrollBehavior(to, from, savedPosition) {
    // Handle anchor scrolls natively if needed
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
  },
  // Override default link handling to ignore anchors
  beforeEach((to, from, next) => {
    // Let the browser handle links that are pure anchors
    if (to.path.startsWith('#')) {
      return false;
    }
    next();
  })
});

But the first approach (adding @click.prevent to individual links) is more targeted and less likely to interfere with other router behavior.

Give this a try—your dropdown should now expand without the URL updating like a route jump, and the anchor scroll will work as expected if you use the manual method!

内容的提问来源于stack exchange，提问作者Cesar Henrique Damascena