Vue.js中如何让v-html内的锚点链接生效？

问题根源 #

v-html动态渲染的内容是在组件挂载后才插入DOM的，浏览器默认的锚点跳转逻辑会在页面初始加载时查找元素，无法识别后续动态生成的锚点；另外用<span>这类行内元素包裹v-html，可能会导致锚点元素的布局上下文异常，影响滚动定位。

可行解决方法 #

1. 手动绑定点击事件实现滚动 #

放弃浏览器默认锚点行为，给外部链接添加点击事件，手动定位到目标元素：

<template>
  <div>
    <a @click="scrollTo('foobar')">跳转到foobar</a>
    <div v-html="guideContent"></div>
  </div>
</template>

<script setup>
const guideContent = `<a id='foobar'>用户指南章节</a>`;

const scrollTo = (anchorId) => {
  const target = document.getElementById(anchorId);
  target?.scrollIntoView({ behavior: 'smooth' });
};
</script>

2. 动态渲染后触发锚点校验 #

如果需要保留浏览器默认的#锚点链接形式，可在v-html内容渲染完成后，手动检查URL哈希并执行滚动：

<template>
  <div>
    <a href="#foobar">跳转到foobar</a>
    <div ref="contentWrap" v-html="guideContent"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';

const guideContent = `<a id='foobar'>用户指南章节</a>`;
const contentWrap = ref(null);

onMounted(() => {
  handleAnchorScroll();
});

// 若guideContent是动态更新的，监听变化后重新处理
watch(() => guideContent, () => {
  nextTick(handleAnchorScroll);
});

const handleAnchorScroll = () => {
  const hash = window.location.hash.slice(1);
  if (hash) {
    const target = document.getElementById(hash);
    target?.scrollIntoView();
  }
};
</script>

3. 更换v-html的包裹元素 #

将包裹v-html的<span>替换为<div>等块级元素，行内元素可能会限制内部锚点元素的布局，导致浏览器无法正确识别其位置：

<!-- 不推荐：行内元素可能引发布局问题 -->
<span v-html="guideContent"/>

<!-- 推荐：使用块级元素作为容器 -->
<div v-html="guideContent"/>

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