Nuxt.js中nuxt-link经props传递渲染后失效的解决方法咨询

v-html仅能将字符串解析为原生HTML节点插入DOM，但不会触发Vue的组件编译流程。<nuxt-link>作为Vue路由组件，会被当作未知的普通HTML标签处理，自然无法实现无刷新导航功能。

方案一：编译模板字符串实现组件渲染（推荐） #

通过Vue的模板编译器，将包含<nuxt-link>的字符串编译为可执行的Vue组件，完整支持组件的所有特性（如路由激活样式、跳转逻辑）。

Nuxt 2 实现 #

<template>
  <component :is="dynamicRenderComponent" />
</template>

<script>
import compiler from 'vue-template-compiler'

export default {
  name: 'MyComponent',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  computed: {
    dynamicRenderComponent() {
      // 编译模板字符串，生成render函数
      const { render, staticRenderFns } = compiler.compile(`<div>${this.content}</div>`)
      // 注册nuxt-link组件，确保编译时能识别
      return {
        render,
        staticRenderFns,
        components: {
          'nuxt-link': this.$nuxt.$options.components['nuxt-link']
        }
      }
    }
  }
}
</script>

Nuxt 3 实现 #

<script setup>
import { compile } from '@vue/compiler-dom'
import { h, computed } from 'vue'

const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

const dynamicRenderComponent = computed(() => {
  const { code } = compile(`<div>${props.content}</div>`)
  // 解析编译后的代码生成render函数
  const render = new Function('Vue', code)({ h })
  return { render }
})
</script>

<template>
  <component :is="dynamicRenderComponent" />
</template>

方案二：替换链接标签+手动路由跳转（简易降级方案） #

如果仅需基础跳转功能，可将<nuxt-link>替换为原生<a>标签，通过监听点击事件调用$router.push实现无刷新跳转。

<template>
  <div v-html="processedContent" @click="handleLinkClick"></div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  computed: {
    processedContent() {
      // 替换nuxt-link为带标识的a标签
      return this.content.replace(
        /<nuxt-link to="([^"]+)">([^<]+)<\/nuxt-link>/g,
        '<a href="$1" class="nuxt-link-anchor">$2</a>'
      )
    }
  },
  methods: {
    handleLinkClick(e) {
      const target = e.target.closest('.nuxt-link-anchor')
      if (target) {
        e.preventDefault()
        this.$router.push(target.getAttribute('href'))
      }
    }
  }
}
</script>

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