Vue/Nuxt框架下v-html无法渲染<nuxt-link>组件及@click事件的问题求助

你遇到的问题核心在于v-html的本质限制：它只会把内容当作纯静态HTML插入DOM，完全跳过Vue的编译流程。这就导致<nuxt-link>这类Vue组件、:to动态绑定以及@click事件都不会被Vue识别，只会被当作无效的普通HTML标签处理。

下面给你几个按推荐程度排序的可行解决方案：

方案1：拆分内容为可渲染片段（最安全可控） #

这种方法把富文本拆成「普通HTML文本」和「Vue组件片段」的混合数组，再在模板中逐个渲染，完全可控且无XSS风险（只要内容来源可信）。

实现步骤： #

1. 重构你的ekspresKeno内容，抽离需要组件的部分：

ekspresKeno: {
  title: "Necə Oynanılır?",
  image: "/keno/ekspres-keno-popup.jpg",
  contentSegments: [
    "<p>Azərbaycanda ilk dəfə dünya üzrə məşhur Keno oyunları!</p>",
    "<p>Keno oyunlarını ən azı 1 AZN, ən çoxu isə 1000 AZN olmaqla istənilən vaxt oyanaya bilərsiniz. Maksimal uduş məbləği isə 100 000 AZN-dir. </p>",
    "<p><strong>VACİB:</strong> Təsadüfi Nömrələrin Generasiyası vasitəsi ilə nömrələnmiş nömrələrdən təsadüfi şəkildə bəziləri təyin olunur və bu nömrələr əsasında uduş kombinasiyaları təyin olunur.</p>",
    {
      type: "nuxt-link",
      text: "Yardım",
      to: () => this.$store.state.PAGES.FAQ // 用函数延迟获取，避免初始化时store未就绪
    },
    "<p> bölmesine bakın. </p>"
  ]
}

2. 在组件模板中循环渲染片段：

<template>
  <div class="content">
    <template v-for="(seg, index) in item.contentSegments" :key="index">
      <!-- 渲染普通HTML文本 -->
      <span v-if="typeof seg === 'string'" v-html="seg"></span>
      <!-- 渲染nuxt-link组件 -->
      <nuxt-link v-else-if="seg.type === 'nuxt-link'" :to="seg.to">
        {{ seg.text }}
      </nuxt-link>
      <!-- 扩展：渲染带@click的按钮 -->
      <button v-else-if="seg.type === 'button'" @click="seg.handleClick">
        {{ seg.text }}
      </button>
    </template>
  </div>
</template>

方案2：动态编译字符串模板（适合复杂可信内容） #

如果内容结构复杂、不想手动拆分，可以用Vue的编译功能把含<nuxt-link>的字符串模板转换成可渲染组件。注意：仅适用于完全可信的内容（如后台生成的内容），否则存在XSS风险！

Nuxt 3实现示例： #

<template>
  <div class="content">
    <component :is="dynamicRenderComponent" />
  </div>
</template>

<script setup>
import { compile } from '@vue/runtime-core'
import { computed } from 'vue'
import { useStore } from 'pinia' // 或Vuex，根据你的状态管理工具调整

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const dynamicRenderComponent = computed(() => {
  // 编译内容为Vue渲染函数
  const { render } = compile(`<div>${props.item.content}</div>`)
  // 返回组件对象，注入全局状态
  return {
    render,
    setup() {
      return {
        $store: useStore()
      }
    }
  }
})
</script>

Nuxt 2实现示例： #

<template>
  <div class="content">
    <component :is="dynamicComponent" />
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    dynamicComponent() {
      return Vue.extend({
        template: `<div>${this.item.content}</div>`,
        computed: {
          faqPage() {
            return this.$store.state.PAGES.FAQ
          }
        }
      })
    }
  }
}
</script>

方案3：用Markdown语法替代Vue组件标签 #

如果内容适合用Markdown编写，可以用解析器将Markdown转换成HTML，同时把链接替换为<nuxt-link>。

实现步骤： #

1. 安装Markdown解析器marked：

npm install marked

2. 修改内容为Markdown格式：

ekspresKeno: {
  title: "Necə Oynanılır?",
  image: "/keno/ekspres-keno-popup.jpg",
  content: `
Azərbaycanda ilk dəfə dünya üzrə məşhur Keno oyunları!

Keno oyunlarını ən azı 1 AZN, ən çoxu isə 1000 AZN olmaqla istənilən vaxt oyanaya bilərsiniz. Maksimal uduş məbləği isə 100 000 AZN-dir. 

**VACİB:** Təsadüfi Nömrələrin Generasiyası vasitəsi ilə nömrələnmiş nömrələrdən təsadüfi şəkildə bəziləri təyin olunur və bu nömrələr əsasında uduş kombinasiyaları təyin olunur.

Daha çox məlumat və bütün oyun qaydaları için [Yardım](/faq) bölmesine bakın.
`
}

3. 在组件中解析并替换链接：

<template>
  <div class="content">
    <component :is="parsedContent" />
  </div>
</template>

<script setup>
import { marked } from 'marked'
import { compile } from '@vue/runtime-core'
import { computed } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const parsedContent = computed(() => {
  // Markdown转HTML
  let html = marked(props.item.content)
  // 替换<a>标签为<nuxt-link>
  html = html.replace(/<a href="([^"]+)">([^<]+)<\/a>/g, '<nuxt-link :to="$1">$2</nuxt-link>')
  // 编译为可渲染组件
  const { render } = compile(`<div>${html}</div>`)
  return { render }
})
</script>

总结 #

• 内容结构简单：优先选方案1，安全可控；
• 内容复杂且来源可信：用方案2；
• 内容适合Markdown编写：用方案3。

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