Vue3+Vue Router4中如何处理v-html内的Markdown链接避免页面强制刷新

方案1：事件委托拦截链接点击（最简便） #

直接在渲染markdown的容器上绑定点击事件，拦截所有a标签的跳转行为，区分内部/外部链接分别处理，不需要修改markdown解析逻辑。

<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 给markdown容器加点击监听 -->
    <div class="markdown-content" @click="handleMarkdownClick" v-html="content"></div>
  </div>
</template>

<script>
import { parseMarkdown } from "../../helpers/markdownParser";

export default {
  name: "BlogPost",
  data() {
    return {
      slug: undefined,
      title: null,
      content: null,
    };
  },
  async beforeCreate() {
    this.slug = this.$route.params.slug;
    await this.$axios.get(`/posts/${this.slug}`).then((response) => {
      const data = response.data[0];
      this.title = data.title;
      this.content = parseMarkdown(data.content);
    });
  },
  methods: {
    handleMarkdownClick(e) {
      // 查找点击源最近的a标签
      const link = e.target.closest('a');
      if (!link) return;
      
      const href = link.getAttribute('href');
      // 匹配内部路由：以/开头、无http/https开头的链接
      const isInternalLink = href.startsWith('/') && !href.startsWith('http');
      
      if (isInternalLink) {
        // 阻止默认页面刷新行为，用vue-router跳转
        e.preventDefault();
        this.$router.push(href);
      } else {
        // 外部链接可选配置：新窗口打开
        e.preventDefault();
        window.open(href, '_blank', 'noopener noreferrer');
      }
    }
  }
};
</script>

方案2：自定义markdown-it链接渲染规则 #

如果需要更精准的控制，可以修改markdown-it的渲染逻辑，给内部链接添加特殊标识，后续处理更灵活：
修改markdownParser.js代码：

import MarkdownIt from "markdown-it";
const markdown = new MarkdownIt();

// 保留默认的链接渲染逻辑
const defaultRender = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) {
  return self.renderToken(tokens, idx, options);
};

// 重写链接渲染规则
markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  const href = tokens[idx].attrGet('href');
  const isInternal = href.startsWith('/') && !href.startsWith('http');
  if (isInternal) {
    // 给内部链接添加自定义属性，方便后续识别
    tokens[idx].attrPush(['data-internal-link', 'true']);
  }
  return defaultRender(tokens, idx, options, env, self);
};

export const parseMarkdown = (mdContent) => {
  return markdown.render(mdContent);
};

之后事件委托的时候可以直接通过link.dataset.internalLink判断是否为内部链接，逻辑更可靠。

• 虚拟DOM渲染方案：使用markdown-it插件将Markdown解析为虚拟DOM节点，再通过Vue的渲染函数渲染，可原生支持Vue组件（如router-link），完全规避v-html的安全风险。
• 动态编译方案：将解析后的包含router-link的HTML字符串，通过Vue的compileAPI编译为动态组件渲染，路由逻辑可直接被Vue识别，适合内容来源安全可控的场景。
• 第三方组件库：使用封装好的Vue Markdown渲染组件，比如vue3-markdown-it、@kangc/v-md-editor的预览模式等，内置了链接处理、XSS防护等能力，无需自己手动实现基础逻辑。

注意：所有动态渲染用户提交内容的场景都需要做好XSS防护，可搭配xss等过滤库对解析后的HTML内容做 sanitize 处理，避免恶意脚本注入。

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