VueJS如何阻止含#值的锚点刷新页面并实现锚点跳转

方案一：事件委托拦截点击并手动滚动 #

因为v-html注入的内容无法直接绑定Vue事件，最直接的方法是给父容器添加点击事件，拦截锚点的默认跳转行为，再手动触发滚动：

<template>
  <!-- 用@click.prevent先阻止所有点击的默认行为 -->
  <div v-html="content" @click.prevent="handleAnchorClick"></div>
</template>

<script>
export default {
  data() {
    return {
      content: '<a href="#section">跳转到Section</a>'
    }
  },
  methods: {
    handleAnchorClick(e) {
      const target = e.target
      // 判断点击的是锚点类型的a标签
      if (target.tagName === 'A' && target.getAttribute('href')?.startsWith('#')) {
        const anchorId = target.getAttribute('href').slice(1)
        const targetElement = document.getElementById(anchorId)
        if (targetElement) {
          // 滚动到目标元素，可选添加平滑滚动效果
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      }
    }
  }
}
</script>

<style scoped>
/* 保持锚点的点击样式 */
div a {
  color: #42b983;
  cursor: pointer;
  text-decoration: underline;
}
</style>

方案二：预处理注入的HTML内容（若能控制content来源） #

如果你可以修改content的内容（比如后端返回或前端生成时），可以直接替换原生锚点为自定义可点击元素，避免默认跳转：

// 假设content是从接口获取的原始HTML
const rawContent = '<a href="#section">跳转到Section</a><a href="#another">跳转到Another</a>'
// 替换所有锚点a标签为带自定义属性的span
this.content = rawContent.replace(/<a href="#([^"]+)">([^<]+)<\/a>/g, 
  '<span class="anchor-link" data-target="#$1">$2</span>'
)

然后同样给父容器加点击事件，处理滚动：

<template>
  <div v-html="content" @click="handleAnchorClick"></div>
</template>

<script>
export default {
  // ...data部分
  methods: {
    handleAnchorClick(e) {
      const target = e.target.closest('.anchor-link')
      if (target) {
        const targetSelector = target.dataset.target
        const targetElement = document.querySelector(targetSelector)
        targetElement?.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}
</script>

<style scoped>
.anchor-link {
  color: #42b983;
  cursor: pointer;
  text-decoration: underline;
}
</style>

关键注意点 #

• 事件委托依赖事件冒泡，确保父容器能捕获到子元素的点击事件；
• scrollIntoView的参数可以根据需求调整，比如block: 'start'确保元素顶部对齐视口；
• 如果页面有固定导航栏，可能需要计算偏移量，调整滚动位置：

  const navbarHeight = document.querySelector('.navbar').offsetHeight
  window.scrollTo({
    top: targetElement.offsetTop - navbarHeight,
    behavior: 'smooth'
  })
  

内容的提问来源于stack exchange，提问作者Riku