Vue中data内<router-link>经v-html渲染时链接不生效怎么办

• v-html会把传入的字符串直接作为原生HTML插入页面DOM，全程不经过Vue的模板编译流程，字符串中写入的<router-link>标签对Vue而言只是普通的未知自定义节点，既不会被识别为全局注册的RouterLink组件，也不会被编译成可跳转的路由链接。
• 原代码中${<router-link to="{name: 'home'}">homepage</router-link>}的写法存在语法错误：JS模板字符串的${}位置仅支持传入可转为字符串的合法JS表达式，直接写入HTML标签的写法会触发JS语法报错，根本无法生成有效的DOM字符串。
• 即便忽略上述问题，字符串里写的to="{name: 'home'}"也会被解析为纯文本值，无法作为路由对象被RouterLink组件正常识别。

方案1：改动最小的适配写法（适配现有v-html使用场景） #

由于<router-link>最终渲染产物就是带路由跳转逻辑的<a>标签，可以直接在存储的字符串中使用原生a标签，通过事件委托实现路由跳转，完全绕开“v-html无法解析Vue组件”的限制，不需要改动你现有的content存储逻辑：

1. 修正data中的content为合法字符串，移除错误的${}插值，给需要跳转的a标签加上路由标识：

   data(){
     return {
       content: `
           <p>Click <a href="javascript:;" data-path="/home">homepage</a> 
           or <a href="javascript:;" data-path="/login">login</a> to proceed.</p>
       `
     }
   }
   

2. 给存放v-html内容的容器绑定点击委托，识别带路由标识的链接，调用vue-router的跳转方法：

   <template>
     <div 
       @click="handleInnerLinkClick" 
       v-html="content"
     ></div>
   </template>
   
   <script>
   export default {
     methods: {
       handleInnerLinkClick(e) {
         // 匹配点击目标是否为带路由标记的内部链接
         const linkNode = e.target.closest('a[data-path]')
         if (!linkNode) return
         // 阻止a标签默认跳转行为
         e.preventDefault()
         // 调用全局路由方法完成跳转
         this.$router.push(linkNode.dataset.path)
       }
     }
   }
   </script>
   

方案2：重构内容结构，避免字符串内嵌Vue组件 #

如果内容结构固定、嵌入的路由链接较多，建议直接放弃把包含Vue组件的内容存为字符串的写法，将结构直接写在模板中，让Vue正常完成组件编译：

<template>
  <p>
    Click 
    <router-link :to="{ name: 'home' }">homepage</router-link>
    or 
    <router-link to="/login">login</router-link>
    to proceed.
  </p>
</template>

如果需要动态拼接内容片段，可以使用Vue的渲染函数配合全局注册的RouterLink组件生成虚拟节点，不要将组件标签写进纯字符串传入v-html。

方案3：富文本场景的适配逻辑 #

如果content是来自用户输入的富文本内容，可以在富文本解析环节，自动识别内容中的内部链接标识，将其替换为匹配当前路由跳转逻辑的原生a标签，和方案1的事件委托逻辑配合使用即可，不需要强求在字符串中保留<router-link>标签。

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