Nuxt/Vue 如何让div文本中的URL转换为可正常点击的链接？

开发者阿泽

2026-9-26

问题根因

Vue/Nuxt 默认会对 {{ }} 插值的文本内容做HTML转义处理，你通过字符串替换生成的 <NuxtLink>、<a> 标签会被识别为纯文本渲染，不会被解析为真实DOM节点，因此无法触发链接跳转。

可用解决方案

方案1：`v-html` 指令渲染（仅适用于输入文本完全可信的场景）

v-html 会直接将内容解析为原生HTML，注意该方案存在XSS注入风险，仅可用于输入内容100%可控的场景，且无法解析<NuxtLink>这类Vue组件，只能使用原生<a>标签。

调整转换方法为生成原生a标签：

setLinks(text) {
  const Rexp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(Rexp, "<a href='$1' target='_blank' rel='noopener noreferrer'>$1</a>");
}

模板中使用v-html渲染处理后的内容：

<template>
  <div v-html="setLinks(原始文本变量)"></div>
</template>

方案2：拆分文本循环渲染（更安全，支持NuxtLink）

如果需要使用NuxtLink的路由能力、或者输入内容存在不可控的UGC内容，可先将文本按链接分割为内容块，再在模板中循环渲染对应类型的节点，完全规避XSS风险：

新增文本解析方法：

parseTextWithLinks(text) {
  const linkRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  const parts = text.split(linkRegex).filter(Boolean);
  return parts.map(part => {
    return part.match(linkRegex) 
      ? { type: 'link', content: part } 
      : { type: 'text', content: part }
  })
}

模板中循环渲染内容：

<template>
  <div>
    <template v-for="(item, index) in parseTextWithLinks(原始文本变量)" :key="index">
      <span v-if="item.type === 'text'">{{ item.content }}</span>
      <NuxtLink v-else :to="item.content" target="_blank">{{ item.content }}</NuxtLink>
    </template>
  </div>
</template>